如何使用包或网格实现以下Tkinter GUI布局？ [英] How do I achieve the following Tkinter GUI layout with either pack or grid?

问题描述

以下是我的跳棋游戏的当前GUI布局：

正如您所看到的，它包含顶部的菜单，左侧的Canvas以及绘制棋盘的工具栏（Frame ）在右上角，我有各种格式/导航按钮，以及用于注释移动的文本小部件。目前，我正在为小部件使用网格布局。

以下是我需要做的事情：

1. 当文本数量增长到小于窗口小部件大小时，能够在文本窗口小部件中显示/隐藏滚动条。 （这似乎需要网格布局，根据这篇文章。）


2. 通过[首选项]对话框更改文本小部件中文本的字体和/或大小，而不会在文本小部件周围留下奇怪的空白。 （这似乎需要一个包布局，因为Text小部件只能以字符而不是像素给出宽度和高度......这意味着当我更改字体或大小时，Text小部件会增大或缩小，并且窗口不会调整以适应网格布局我一直在尝试使用Font.measure根据所选字体调整文本部件的大小，但仍然存在差距，因为我无法将部件大小调整为确切的像素。）


3. 我的最终解决方案需要跨平台（包括Windows和Linux，以及希望的Mac）。
   

我可以使用哪种布局来满足我的要求？如果两者都不能完全发挥作用，哪种布局（网格或包装）会使我接近我的目标？感谢！

解决方案

对于这个简单的布局，您可以使用 grid ， pack 或两者兼而有之。在这种特殊情况下也没有明显的优势。两者都有你想要的调整行为。

关闭我的头顶，我会用一个水平框架来保存按钮，并将按钮打包。然后，我可能会使用网格将工具栏，文本窗口小部件和滚动条放入框架中。包也可以使用，要么工作。这需要照顾右侧。

如果你想让菜单栏像图片一样（即：非标准菜单，只能在棋盘上），我会使用一个类似的技术：左侧的另一个框架，菜单栏位于顶部，棋盘位于底部。

然后我会在主窗口中使用pack，状态栏在底部，左边的棋盘，然后是右边的文本区域。

然而，最好使用标准菜单栏，这意味着您不需要一个包含棋盘/菜单栏组合的框架

以下是使用标准菜单栏的一种解决方案的快速入门示例。这使用了将大多数小部件作为父项的子项的技术，然后使用_ 参数中的将它们放入容器中。这样以后可以更容易地更改布局，因为您不必更改整个层次结构，而只需将容器部件放置在容器中。

 导入Tkinter为tk 
导入随机
 
 class App（tk.Tk）：
 def __init __（self，* args，** kwargs）：
 tk.Tk .__ init __（self，* args，** kwargs）
 
 size = 40 
 menubar = tk.Menu（self）
 menubar.add_cascade（label =游戏）
 menubar.add_cascade（label =Options）
 menubar.add_cascade（label =Help）
 chessboard = tk.Canvas（width = 8 * size，height = 8 * size，borderwidth = 0，
 highlightthickness = 0）
 statusbar = tk.Label（self，borderwidth = 1，relief =sunken）
 right_panel = tk.Frame（self，borderwidth = 1，relief =沉没）
 scrollbar = tk.Scrollbar（orient =vertical，borderwidth = 1）
＃NB身高无关紧要;它会高达
 text = tk.Text（background =white，width = 40，height = 1，borderwidth = 0，yscrollcommand = scrollbar.set）
滚动条。 config（command = text.yview）
 
 toolbar = tk.Frame（self）
 for my range（10）：
b = tk.Button（self，text = B％s％i，borderwidth = 1）
 b.pack（in_ = toolbar，side =left）
 
 self.config（menu =菜单栏）
 statusbar .pack（side =bottom，fill =x）
 chessboard.pack（side =left，fill =both，expand = False）
 toolbar.grid（in_ = right_panel ，row = 0，column = 0，sticky =ew）
 right_panel.pack（side =right，fill =both，expand = True）
 text.grid（in_ = right_panel ，row = 1，column = 0，sticky =nsew）
 scrollbar.grid（in_ = right_panel，row = 1，column = 1，sticky =ns）
 right_panel.grid_rowconfigure（1 ，weight = 1）
 right_panel.grid_columnconfigure（0，weight = 1）
 
 if __name__ ==__main_ _：
 app = App（）
 app.mainloop（）
  




Here's my current GUI layout for my checkers game:

As you can see, it consists of a Menu along the top, a Canvas on the left where I draw the checkerboard, a toolbar (Frame) on the top right where I have various formatting/navigation buttons, and a Text widget that is used to annotate moves. Currently, I am using a grid layout for the widgets.

Here's what I need to do:

1. Be able to show/hide a scrollbar in the Text widget when the amount of text grows larger than the widget size. (This seems to require the grid layout, according to this article.)
2. Change the font and/or size of the text in the Text widget [via a Preferences dialog] and not leave weird gaps around the Text widget. (This seems to require a pack layout because the Text widget can only be given a width and height in characters not pixels ... that means the Text widget grows or shrinks when I change the font or size, and the window won't adjust to fit with a grid layout. I've been trying to use Font.measure to adjust the Text widget size according to the font selected, but I still get gaps because I can't resize the widget down to the exact pixel.)
3. My final solution needs to be cross-platform (both Windows & Linux, and hopefully Mac).

Which layout can I use to meet my requirements? If neither will work completely, which layout (grid or pack) will get me closest to my goal? Thanks!

解决方案

For this simple layout you could use grid, pack or both. Neither has a clear advantage in this particular case. Both have the resize behavior you desire.

Off the top of my head I would use a horizontal frame to hold the buttons, and pack the buttons in it. I would then probably use grid to place the toolbar, text widget and scrollbar inside a frame. Pack can be used too, either would work. That takes care of the right side.

If you want the menubar the way it is in the picture (ie: non-standard, only over the chessboard) I would use a similar technique: another frame for the left side with the menubar packed on the top, chessboard on the bottom.

i would then use pack in the main window, with statusbar on the bottom, the chessboard on the left, and then the text area on the right.

However, it's better to use a standard menubar which means you don't need a containing frame for the chessboard/menubar combination

Here's a quick hack at one solution using a standard menubar. This uses the technique of putting most widgets as children of the parent, then using the in_ parameter to put them in a container. This makes it much easier to change the layout later since you don't have to change a whole hierarchy, but only placement of widgets in containers.

import Tkinter as tk
import random

class App(tk.Tk):
    def __init__(self, *args, **kwargs):
        tk.Tk.__init__(self, *args, **kwargs)

        size = 40
        menubar = tk.Menu(self)
        menubar.add_cascade(label="Game")
        menubar.add_cascade(label="Options")
        menubar.add_cascade(label="Help")
        chessboard = tk.Canvas(width=8*size, height=8*size, borderwidth = 0,
                               highlightthickness=0)
        statusbar = tk.Label(self, borderwidth=1, relief="sunken")
        right_panel = tk.Frame(self, borderwidth = 1, relief="sunken")
        scrollbar = tk.Scrollbar(orient="vertical", borderwidth=1)
        # N.B. height is irrelevant; it will be as high as it needs to be
        text = tk.Text(background="white",width=40, height=1, borderwidth=0, yscrollcommand=scrollbar.set)
        scrollbar.config(command=text.yview)

        toolbar = tk.Frame(self)
        for i in range(10):
            b = tk.Button(self, text="B%s" % i, borderwidth=1)
            b.pack(in_=toolbar, side="left")

        self.config(menu=menubar)
        statusbar.pack(side="bottom", fill="x")
        chessboard.pack(side="left", fill="both", expand=False)
        toolbar.grid(in_=right_panel, row=0, column=0, sticky="ew")
        right_panel.pack(side="right", fill="both", expand=True)
        text.grid(in_=right_panel, row=1, column=0, sticky="nsew")
        scrollbar.grid(in_=right_panel, row=1, column=1, sticky="ns")
        right_panel.grid_rowconfigure(1, weight=1)
        right_panel.grid_columnconfigure(0, weight=1)

if __name__ == "__main__":
    app = App()
    app.mainloop()

这篇关于如何使用包或网格实现以下Tkinter GUI布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！