项目13-GUI编程-教案2

序号：25章节名称项目13GUI编程（二）教学课时2授课班级人工智能2501、2502授课时间授课地点教学目标知识目标1.熟悉Tkinter三种布局方式（Pack、Grid、Place）的特点与适用场景。

2.掌握Grid布局（row、column、columnspan、rowspan）和Place布局（x、y、width、height）的使用方法。

3.掌握组件交互的实现方式：事件处理器（command参数）与事件绑定（bind()方法）。

4.理解组件间交互逻辑（如按钮点击更新标签、复选框选择触发消息框）。能力目标1.能根据界面需求选择合适的布局方式（Grid用于表格类布局，Place用于精准定位）。

2.能通过command参数为按钮绑定回调函数，通过bind()方法绑定鼠标、键盘事件。

3.能实现复杂GUI交互功能（如点餐按钮弹出提示、用餐人数选择触发消息框、特价图片点击打开新窗口）。素质目标1.培养界面布局的逻辑性与美观性，树立“简洁、易用、美观”的GUI设计理念。

2.强化问题解决能力，能分析组件交互中的逻辑关系（如事件触发与响应），提升系统思维。

3.结合餐馆点餐案例，传承中华饮食文化，培养将编程技术与生活场景结合的创新能力。教学内容主要内容1.组件的布局

-布局概述：Tkinter布局的作用，三种布局方式（Pack、Grid、Place）的区别。

-Grid布局：row（行）、column（列）指定位置，columnspan（跨列）、rowspan（跨行）实现组件跨区域，适用于表格类界面（如登录界面）。

-Place布局：x、y（坐标）、width、height（大小）实现精准定位，适用于对位置要求严格的界面（如菜单展示界面）。

2.组件交互

-组件交互概念：用户与组件、组件间的响应关系（如按钮点击更新标签）。

-事件处理器：通过组件command参数绑定回调函数（如Button的command调用函数）。

-事件绑定：bind()方法绑定事件（如鼠标点击<Button-1>、键盘按键<Up>），事件对象（event.keysym等属性）的使用。重点1.Grid布局（row、column、columnspan、rowspan）和Place布局（x、y坐标）的使用。

2.组件交互的实现：command参数绑定函数、bind()方法绑定事件。

措施：通过案例（登录界面Grid布局、菜单界面Place布局、点餐交互功能）分解知识点，设计分步实操任务（基础：布局实现；进阶：交互功能添加）强化练习。难点1.Grid布局中组件跨列（columnspan）、跨行（rowspan）的逻辑，避免组件重叠。

2.bind()方法中事件类型（如<Button-1>、<Up>）的记忆与事件对象属性（event.keysym）的应用。

措施：结合网格示意图讲解Grid布局的行列逻辑，通过对比案例（不同事件类型的绑定效果）明确事件绑定规则，针对常见错误（如行列索引设置错误、事件类型写错）专项讲解。教法改革教学方法讲授法、演示法、实操法、案例分析法、分组讨论法教学手段多媒体教学、编程环境实操、任务驱动练习教学反思作业及学习评价表学习评价表评价内容自评同桌评师评能合理选择窗口布局能熟练交互各组件能积极回答教师的提问能积极参与小组讨论评价指标A．优秀B.一般C.较差二、教学设计教学步骤教学内容与情境设计教师活动学生活动时间分配情境导入1.结合阿曹制作界面时发现组件位置与设想不符，以及想实现组件间交互的场景，提问：“如何让界面中的按钮、输入框等组件按表格整齐排列？如何实现点击按钮后弹出新窗口、更新文本等效果？”

2.明确任务目标：掌握Tkinter布局方式与组件交互，实现美观且功能完善的GUI界面。

【课程思政】通过界面布局优化和交互功能实现，培养“精益求精”的工匠精神，理解良好的用户体验来自细节设计。引入场景、提问、明确目标思考问题，联想常用软件界面的布局（如登录界面的账号密码框排列）和交互（如点击按钮提交表单）5分钟知识讲解11.布局方式概述（3分钟）

-对比三种布局：Pack（简单垂直/水平排列）、Grid（表格布局，适合登录、表单）、Place（绝对定位，适合精准布局）。

2.Grid布局（7分钟）

-演示Grid核心参数：row（行索引，从0开始）、column（列索引）、columnspan（跨列数）、rowspan（跨行数），结合“点菜登录界面”案例（标题跨2列、登录按钮跨2列）讲解布局逻辑。

3.Place布局（5分钟）

-演示Place参数：x（水平坐标）、y（垂直坐标）、width（宽度）、height（高度），结合“饭馆菜单界面”案例（图片、按钮按坐标定位）讲解使用场景。

【课程思政】通过Grid布局的整齐有序，培养逻辑思维与规范意识；通过Place布局的精准定位，培养细致认真的操作习惯。PPT讲解、代码演示（分别用Grid实现登录界面、Place实现菜单界面）记录两种布局的参数与适用场景，观察Grid布局中跨列/跨行效果，理解Place布局的坐标逻辑15分钟实操演练任务：饭馆点菜界面创建（例1.4、例1.5）

-任务1：用Grid布局实现“点菜登录界面”（标题、用户名/密码标签与输入框、登录按钮按表格排列）；

-任务2：用Place布局实现“饭馆菜单界面”（三个菜系图片、文本、按钮按坐标定位，特价海报与用餐人数复选框合理排列）。

【课程思政】通过登录界面和菜单界面的实操，体会GUI布局对用户体验的影响，培养“以用户为中心”的设计思维。巡回指导，重点解决Grid布局跨列/跨行错误、Place布局坐标设置不当导致组件重叠问题编写代码，实现两种布局的界面，调试组件位置与大小，确保界面美观整齐20分钟知识讲解21.组件交互基础（5分钟）

-讲解组件交互概念：用户操作（点击、输入）触发组件响应（弹出消息、更新内容），分为command绑定（按钮专用）和bind()事件绑定（通用）。

2.事件处理器与事件绑定（10分钟）

-演示command参数：Button的command绑定回调函数（如点击“点菜”按钮弹出“点菜成功”消息框）；

-演示bind()方法：标签绑定鼠标点击<Button-1>、窗口绑定键盘方向键<Up>/<Down>，通过event对象（event.keysym获取按键名称）实现不同操作的响应。

【课程思政】通过组件交互的逻辑设计，培养系统思维，理解“操作-响应”的对应关系对程序功能的重要性。代码演示（“点菜”按钮command绑定、标签鼠标点击bind绑定、键盘按键响应）记录command和bind()的使用方法，分析事件对象属性的作用，对比两种交互方式的适用场景10分钟实操演练任务：餐馆点餐功能实现（例1.6）

-任务1：为菜单界面的“点菜”按钮绑定函数，点击弹出“点菜成功”提示框；

-任务2：为用餐人数复选框绑定函数，勾选时弹出“您好，一共x人用餐”消息框；

-任务3：为特价海报按钮绑定函数，点击打开新窗口显示特价菜品文本与图片。

【课程思政】通过完整的点餐功能实现，体会编程技术在生活服务（餐饮）中的应用价值，培养将技术与实际需求结合的能力。巡回指导，重点解决函数绑定错误、新窗口创建（Toplevel()）、图片引用问题编写代码，实现按钮、复选框的交互功能，调试新窗口弹出与图片显示效果，验证所有交互逻辑20分钟总结与作业1.总结：三种布局方式（Pack、Grid、Place）的特点与适用场景，组件交互的两种实现方式（command、bind()）及核心逻辑。

2.布置任务：

-基础题：用Grid布局实现“个人信息填写界面”（包含姓名、年龄、性别单选框、提交按钮，点击提交弹出填写