使用tkinter实现底部固定按钮、上部可滚动传感器列表布局

你的代码存在几个典型的Tkinter布局和滚动组件实现错误，按以下方案修改即可满足自适应布局、独立行展示条目、动态增删的需求。 #

核心问题修正点 #

• 组件赋值错误：所有Tkinter组件必须先创建实例赋值给变量，再调用grid()/pack()布局方法，禁止frame = tk.Frame(root).grid()这种链式写法，否则变量会拿到None值，后续操作全部失效。
• 滚动容器结构缺失：Canvas不能直接承载滚动条目，必须内嵌一个专门放列表项的Frame，同时绑定两个关键事件：
  • 列表Frame的<Configure>事件：条目增减、尺寸变化时自动更新Canvas滚动区域范围
  • Canvas的<Configure>事件：让内嵌列表Frame宽度始终和Canvas可视区一致，避免出现多余横向滚动条
• 网格权重要逐层配置：从根窗口到内部容器，需要自适应拉伸的行/列必须设置weight>0，固定区域（底部按钮栏）权重设为0，才能实现上部区域占满剩余空间、底栏固定的效果。

动态增删条目实现逻辑 #

所有传感器条目统一放在Canvas内嵌的sensor_list_frame中：

• 新增条目：直接在该Frame内按行grid自定义条目组件，设置sticky='EW'即可自动占满整行宽度
• 删除条目：调用对应条目组件的destroy()方法即可，滚动区域会自动适配新尺寸

修正后可运行代码 #

import tkinter as tk
from tkinter import ttk

class GUI(object):
    
    def __init__(self, root):
        self.root = root
        self.root.title('Sensors')
        
        windowWidth = 700
        windowHeight = 500
        
        # 窗口居中逻辑
        screenWidth = root.winfo_screenwidth()
        screenHeight = root.winfo_screenheight()
        centerX = int(screenWidth/2 - windowWidth / 2)
        centerY = int(screenHeight/2 - windowHeight / 2)
        root.geometry(f'{windowWidth}x{windowHeight}+{centerX}+{centerY}')
        # 如需窗口自由缩放，将下面一行改为 root.resizable(True, True)
        root.resizable(False, False)

        # 根窗口基础网格配置：第一行（滚动区）权重1占满剩余空间，第二行（底栏）固定
        self.root.rowconfigure(0, weight=1)
        self.root.rowconfigure(1, weight=0)

        # 主菜单按钮
        self.sensors = tk.Button(root, text='Sensors', height=3, width=10, 
                                font=('Helvetica',15), borderwidth=5, command=self.Sensors)
        self.options = tk.Button(root, text='Options', height=3, width=10, 
                                font=('Helvetica',15), borderwidth=5, command=self.Options)
        
        # 传感器页滚动区域组件
        self.scroll_container = tk.Frame(root)
        self.canvas = tk.Canvas(self.scroll_container, bg='gray75', highlightthickness=0)
        self.vsb = ttk.Scrollbar(self.scroll_container, orient='vertical', command=self.canvas.yview)
        # 承载所有传感器条目的内嵌Frame
        self.sensor_list_frame = tk.Frame(self.canvas, bg='gray75')
        
        # 绑定列表尺寸变化，自动更新滚动范围
        self.sensor_list_frame.bind(
            "<Configure>",
            lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all"))
        )
        # 在Canvas中嵌入列表Frame
        self.canvas_window = self.canvas.create_window((0, 0), window=self.sensor_list_frame, anchor="nw")
        # 绑定Canvas宽度变化，让列表Frame始终和可视区同宽
        self.canvas.bind(
            "<Configure>",
            lambda e: self.canvas.itemconfigure(self.canvas_window, width=e.width)
        )
        self.canvas.configure(yscrollcommand=self.vsb.set)
        
        # 滚动容器内部网格配置
        self.scroll_container.rowconfigure(0, weight=1)
        self.scroll_container.columnconfigure(0, weight=1)
        self.canvas.grid(row=0, column=0, sticky="NSEW")
        self.vsb.grid(row=0, column=1, sticky="NS")

        # 传感器页底部按钮
        self.addSensorBtn = tk.Button(root, text='Add Sensor', command=self.add_test_sensor)
        self.return_menu_btn = tk.Button(root, text="Return to Main Menu", 
                                        font=('Helvetica'), command=self.MainMenu)

        # 选项页组件
        self.options_return = tk.Button(root, text="Return to Main Menu", 
                                       font=('Helvetica'), command=self.MainMenu)
        
        self.MainMenu()

    def add_test_sensor(self):
        """测试用新增传感器条目，可替换为自定义的条目组件逻辑"""
        row_count = len(self.sensor_list_frame.winfo_children())
        # 单条传感器条目容器，占满整行
        item_frame = tk.Frame(self.sensor_list_frame, bg='white', bd=1, relief='solid')
        item_frame.grid(row=row_count, column=0, sticky='EW', padx=5, pady=3)
        item_frame.columnconfigure(1, weight=1)
        
        # 示例条目内容：传感器名、数值、操作按钮
        tk.Label(item_frame, text=f"传感器 {row_count+1}", bg='white', width=15).grid(
            row=0, column=0, padx=5, pady=5, sticky='W')
        tk.Label(item_frame, text=f"当前值: {24+row_count*0.3:.1f}℃", bg='white').grid(
            row=0, column=1, padx=5, pady=5, sticky='W')
        tk.Button(item_frame, text="编辑", width=8).grid(row=0, column=2, padx=5, pady=5)
        tk.Button(item_frame, text="删除", width=8, command=item_frame.destroy).grid(
            row=0, column=3, padx=5, pady=5)
        
    def MainMenu(self):
        # 隐藏非主菜单组件
        self.scroll_container.grid_remove()
        self.addSensorBtn.grid_remove()
        self.return_menu_btn.grid_remove()
        self.options_return.grid_remove()
        # 主菜单单列表局
        self.root.columnconfigure(0, weight=1)
        # 显示主菜单按钮
        self.sensors.grid(column=0, row=1, sticky='NE', padx=80)
        self.options.grid(column=0, row=1, sticky='NW', padx=80)
         
    def Sensors(self) :
        # 隐藏非传感器页组件
        self.sensors.grid_remove()
        self.options.grid_remove()
        self.options_return.grid_remove()
        # 传感器页两列布局，底栏两个按钮各占一半宽度
        self.root.columnconfigure(0, weight=1)
        self.root.columnconfigure(1, weight=1)
        # 显示传感器页组件
        self.scroll_container.grid(row=0, column=0, columnspan=2, sticky='NSEW')
        self.return_menu_btn.grid(row=1, column=0, sticky='EW', padx=5, pady=5)
        self.addSensorBtn.grid(row=1, column=1, sticky='EW', padx=5, pady=5)
        # 首次进入默认添加3个测试条目
        if len(self.sensor_list_frame.winfo_children()) == 0:
            for _ in range(3):
                self.add_test_sensor()
    
    def Options(self):
        # 隐藏非选项页组件
        self.sensors.grid_remove()
        self.options.grid_remove()
        self.scroll_container.grid_remove()
        self.addSensorBtn.grid_remove()
        self.return_menu_btn.grid_remove()
        # 选项页单列表局
        self.root.columnconfigure(0, weight=1)
        self.root.columnconfigure(1, weight=0)
        self.options_return.grid(row=1, column=0, sticky='N')
        
if __name__ == '__main__':
    root = tk.Tk()
    myGUI = GUI(root)
    root.mainloop()

自定义说明 #

• 传感器条目样式可以完全自定义，只要把条目组件放在sensor_list_frame中按行布局即可，每个条目会自动占满列表宽度。
• 若要实现列表刷新，遍历sensor_list_frame.winfo_children()销毁所有子组件后重新添加条目即可。
• 开启窗口缩放后，滚动区域会自动跟随窗口大小调整，底栏按钮始终固定在窗口底部，不会被滚动区域挤压。

内容的提问来源于stack exchange，提问作者Clich3