如何通过循环自动将按钮排列为网格布局？

我希望通过循环创建按钮并将它们自动排列为网格布局，以下是我的代码：

import customtkinter as ctk

class App(ctk.CTk):
    def __init__(self):
        super().__init__()

        self.title('Searchbar')
        self.geometry('500x500')
        self.resizable(False, False)

        self.items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item10', 'item11', 'item12']


        self.frame = ctk.CTkFrame(self)
        self.frame.pack(pady=5, padx=5, fill='both', expand=True)

    def update(self, data):
        for item in data:
            button = ctk.CTkButton(self.frame, text=item, width=50, height=50)
            button.pack()

if __name__ == '__main__':
    app = App()
    app.update(app.items)
    app.mainloop()

当前运行效果：按钮垂直堆叠排列，从上到下依次显示。
目标效果：按钮以网格形式整齐排列，自动换行填充每行。

要实现网格布局，替换pack()为grid()布局管理器，通过索引计算每个按钮的行和列位置即可，以下是两种可行方案：

方案一：固定列数网格布局 #

设定每行显示的按钮数量，循环时计算对应行、列：

import customtkinter as ctk

class App(ctk.CTk):
    def __init__(self):
        super().__init__()

        self.title('Searchbar')
        self.geometry('500x500')
        self.resizable(False, False)

        self.items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item10', 'item11', 'item12']
        self.cols = 3  # 自定义每行显示的按钮数量

        self.frame = ctk.CTkFrame(self)
        self.frame.pack(pady=5, padx=5, fill='both', expand=True)
        
        # 配置列权重，让按钮自适应容器宽度（可选）
        for col in range(self.cols):
            self.frame.grid_columnconfigure(col, weight=1)

    def update(self, data):
        for index, item in enumerate(data):
            row = index // self.cols  # 计算所在行
            col = index % self.cols   # 计算所在列
            button = ctk.CTkButton(self.frame, text=item, width=50, height=50)
            button.grid(row=row, column=col, padx=5, pady=5, sticky='nsew')

if __name__ == '__main__':
    app = App()
    app.update(app.items)
    app.mainloop()

方案二：可滚动网格布局 #

如果按钮数量较多超出容器范围，使用CTkScrollableFrame实现滚动：

import customtkinter as ctk

class App(ctk.CTk):
    def __init__(self):
        super().__init__()

        self.title('Searchbar')
        self.geometry('500x500')
        self.resizable(False, False)

        self.items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item10', 'item11', 'item12']
        self.cols = 3

        # 使用滚动框架代替普通框架
        self.scroll_frame = ctk.CTkScrollableFrame(self)
        self.scroll_frame.pack(pady=5, padx=5, fill='both', expand=True)
        
        # 配置列权重
        for col in range(self.cols):
            self.scroll_frame.grid_columnconfigure(col, weight=1)

    def update(self, data):
        for index, item in enumerate(data):
            row = index // self.cols
            col = index % self.cols
            button = ctk.CTkButton(self.scroll_frame, text=item, width=50, height=50)
            button.grid(row=row, column=col, padx=5, pady=5, sticky='nsew')

if __name__ == '__main__':
    app = App()
    app.update(app.items)
    app.mainloop()

关键说明 #

• grid(row=row, column=col)：通过索引计算行、列，实现自动网格排列
• padx/pady：设置按钮间的间距，避免布局拥挤
• sticky='nsew'：让按钮在单元格内自适应拉伸（需配合列权重设置）
• 修改self.cols的值可以调整每行显示的按钮数量

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