如何使用带有网格几何管理器的 Tkinter 使用 Python3 创建此布局?

How can I create this layout with Python3 using Tkinter with the grid geometry manager?

我正在尝试创建以下布局:

这是我的代码:

from . import FlowPane,JsonPane,PropertiesPane,ToolbarPane
import tkinter as tk

class ConflixEditor(tk.Tk):
    def __init__(self, args):
        super().__init__()
        self.__dict__.update({k: v for k, v in locals().items() if k != 'self'})
        self.minsize(width=1024, height=768)
        self.title('Conflix Editor')
        # Widget Creation
        self.frame = tk.Frame(self)
        self.toolbarPane = ToolbarPane.ToolbarPane(self.frame, bg='black')
        self.flowPane = FlowPane.FlowPane(self.frame, bg='red')
        self.propertiesPane = PropertiesPane.PropertiesPane(self.frame, bg='blue')
        self.jsonPane = JsonPane.JsonPane(self.frame, bg='green')
        # Widget Layout
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(2, weight=1)
        self.frame.grid(row=0, column=0, sticky=tk.N+tk.E+tk.S+tk.W)
        self.toolbarPane.grid(row=0, column=0, columnspan=3, rowspan=2, sticky=tk.N+tk.E+tk.W)
        self.flowPane.grid(row=2, column=0, columnspan=2, rowspan=5, sticky=tk.N+tk.S+tk.W)
        self.propertiesPane.grid(row=2, column=2, columnspan=1, rowspan=5, sticky=tk.N+tk.E+tk.S)
        self.jsonPane.grid(row=7, column=0, columnspan=3, rowspan=3, sticky=tk.E+tk.S+tk.W)

FlowPane、JsonPane、PropertiesPane、ToolbarPane 的构造函数都有两个参数:父控件和背景颜色。

我没有得到上面想要的结果,而是得到了以下结果:

我做错了什么?如何创建所需的布局?请注意,背景颜色只是暂时的,以确认每个小部件都使用了正确数量的 space。这最终将成为一个用于设计和构建 Netflix Conductor 工作流程的应用程序。我想在黑色区域有一个带有菜单和按钮的工具栏,在红色区域有一个 Canvas 用于显示表示工作流中任务的流程图元素,在蓝色区域有一个用于查看属性的 Treeview,以及viewing/editing 原始 JSON.

底部绿色区域中的文本编辑器

您需要:

  • toolbarPanejsonPane 指定 height 选项;
  • propertiesPane 指定 width 选项;
  • flowPane 添加 tk.Esticky 选项;
  • selfself.frame 使用 grid_rowconfigure()grid_columnconfigure()

下面是更新后的代码:

class ConflixEditor(tk.Tk):
    def __init__(self, *args):
        super().__init__()
        #self.__dict__.update({k: v for k, v in locals().items() if k != 'self'})
        self.minsize(width=1024, height=768)
        self.title('Conflix Editor')
        # make self.frame use all the space of root window
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)
        # Widget Creation
        self.frame = tk.Frame(self)
        self.toolbarPane = ToolbarPane.ToolbarPane(self.frame, bg='black', height=100) # added height option
        self.flowPane = FlowPane.FlowPane(self.frame, bg='red')
        self.propertiesPane = PropertiesPane.PropertiesPane(self.frame, bg='blue', width=250) # added width option
        self.jsonPane = JsonPane.JsonPane(self.frame, bg='green', height=200) # added height option
        # Widget Layout
        self.frame.grid_columnconfigure(0, weight=1) # used self.frame instead of self
        self.frame.grid_rowconfigure(2, weight=1) # used self.frame instead of self
        self.frame.grid(row=0, column=0, sticky=tk.N+tk.E+tk.S+tk.W)
        self.toolbarPane.grid(row=0, column=0, columnspan=3, rowspan=2, sticky=tk.N+tk.E+tk.W)
        self.flowPane.grid(row=2, column=0, columnspan=2, rowspan=5, sticky=tk.N+tk.E+tk.S+tk.W) # added tk.E
        self.propertiesPane.grid(row=2, column=2, columnspan=1, rowspan=5, sticky=tk.N+tk.E+tk.S)
        self.jsonPane.grid(row=7, column=0, columnspan=3, rowspan=3, sticky=tk.E+tk.S+tk.W)