Tkinter文本框布局问题：调整输出框时列文本框出现间隙

问题原因 #

你的布局存在两个核心问题：

1. 上方CSV列文本框与下方输出框共享主窗口的同一组列索引，当输出框调整宽度时，会拉伸对应列的宽度，导致同一列的文本框变形、出现间隙（grid布局默认列宽由该列最宽控件决定）。
2. create_text_boxes创建新文本框时未销毁旧控件，新旧控件叠加在同一网格位置，进一步干扰布局计算。

解决方案 #

1. 用Frame隔离文本框布局 #

将所有CSV列文本框放入独立的Frame中，让文本框的列布局仅作用于这个内部Frame，与主窗口的列完全隔离，避免输出框的布局变化影响文本框。

2. 创建新文本框前销毁旧控件 #

避免新旧控件叠加导致的布局混乱。

3. 统一主窗口控件的列跨度 #

让按钮、输出框等控件跨越多列，避免挤压文本框区域的列空间。

修改后的代码示例 #

调整create_widgets方法：

def create_widgets(self):
    tk.Label(self.master, text="Upload CSV File:").grid(row=1, column=0, padx=5, pady=5, sticky="w")
    self.upload_button = tk.Button(self.master, text="Upload", command=self.upload_csv, font=("Arial", 11, "bold"), bg='blue', fg='white')
    self.upload_button.grid(row=1, column=1, padx=3, pady=3)
    
    # 创建独立Frame包裹CSV文本框，隔离布局
    self.csv_frame = tk.Frame(self.master)
    self.csv_frame.grid(row=2, column=0, columnspan=5, padx=5, pady=5)
    
    # 初始化文本框
    self.text_boxes = {}
    csv_columns = ["Column1", "Column2", "Column3", "Column4", "Column5"]
    for idx, col in enumerate(csv_columns):
        text_box = tk.Text(self.csv_frame, height=20, width=40)
        text_box.grid(row=0, column=idx, padx=5, pady=5)
        self.text_boxes[col] = text_box
        self.text_boxes[col].config(state=tk.DISABLED)
    
    self.predict_button = tk.Button(self.master, text="Predict", command=self.predict, font=("Arial", 11, "bold"), bg='green', fg='white')
    self.predict_button.grid(row=6, column=0, columnspan=5, padx=5, pady=5)
    
    # 输出框Frame
    output_frame = tk.Frame(self.master)
    output_frame.grid(row=8, column=0, columnspan=5, padx=5, pady=10)

    output_title = tk.Label(output_frame, text="Output", font=("Arial", 15, "bold"), bg='blue', fg='white')
    output_title.grid(row=0, column=0, columnspan=2, pady=(0, 5))

    self.output_text = tk.Text(output_frame, height=15, width=50, wrap=tk.WORD)
    self.output_text.grid(row=1, column=0, columnspan=2, padx=5, pady=(0, 5))
    self.output_text.config(state=tk.DISABLED)

    output_frame.grid_columnconfigure(0, weight=1)

调整create_text_boxes方法：

def create_text_boxes(self):
    expected_colums = ["Land Area", "Usable Area", "Floors", "Price"]
    
    # 销毁旧文本框，清理布局
    for box in self.text_boxes.values():
        box.destroy()
    self.text_boxes.clear()
    
    # 在隔离的Frame中创建新文本框
    for idx, col in enumerate(expected_colums):
        text_box = tk.Text(self.csv_frame, height=20, width=35)
        text_box.grid(row=0, column=idx, padx=5, pady=5)
        self.text_boxes[col] = text_box
        
        self.text_boxes[col].insert(tk.END, self.format_csv_data(col))
        self.text_boxes[col].config(state=tk.DISABLED)

额外优化建议 #

• 如果需要文本框宽度严格一致，可以给csv_frame的每一列设置固定宽度，或者用grid_columnconfigure给所有列设置相同的weight值，确保拉伸时同步变化。
• 文本框的width参数基于字符宽度，若要更精确的像素宽度，可以结合字体设置调整，或者使用place布局（但grid更适合规整布局场景）。

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