python tkinter grid 网格

Posted 2023-05-10

参考技术A from tkinter import *
colors = ['red', 'green', 'orange', 'white', 'yellow', 'blue']

r = 0
for c in colors:
Label(text=c, relief=RIDGE, width=25).grid(row=r, column=0)
Entry(bg=c, relief=SUNKEN, width=50).grid(row=r, column=1)
r += 1

///sticky=NSEW,rowconfigure扩展
"add a label on the top and form resizing"

from tkinter import *
colors = ['red', 'white', 'blue']

def gridbox(root):
Label(root, text='Grid').grid(columnspan=2)
row = 1
for color in colors:
lab = Label(root, text=color, relief=RIDGE, width=25)
ent = Entry(root, bg=color, relief=SUNKEN, width=50)
lab.grid(row=row, column=0, sticky=NSEW)
ent.grid(row=row, column=1, sticky=NSEW)
root.rowconfigure(row, weight=1)
row += 1
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=1)

def packbox(root):
Label(root, text='Pack').pack()
for color in colors:
row = Frame(root)
lab = Label(row, text=color, relief=RIDGE, width=25)
ent = Entry(row, bg=color, relief=SUNKEN, width=50)
row.pack(side=TOP, expand=YES, fill=BOTH)
lab.pack(side=LEFT, expand=YES, fill=BOTH)
ent.pack(side=RIGHT, expand=YES, fill=BOTH)

root = Tk()
gridbox(Toplevel(root))
packbox(Toplevel(root))
Button(root, text='Quit', command=root.quit).pack()
mainloop()

columnspan=2 跨两行 row column

知识归纳-网格布局-grid

参考技术A

display:grid/inline-grid;
[会把元素转换为块元素/行内元素]

划分行： grid-template-rows: val val ...;
划分列： grid-template-columns: val val ...;
[val值的个数表示行数]

设置行间距： grid-row-gap: val;
设置列间距： grid-column-gap: val;
复合写法： grid-gap: val(row) val(col);

指定子元素排列的方向: grid-auto-flow:column | row
     [默认值为row]

水平对齐方式：
justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
垂直对齐方式：
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
复合写法： place-content: 垂直对齐方式 水平对齐方式
     [ space-evenly :网格与网格间、网格与边框间的间距相等，对标 space-around ]

水平对齐方式： justify-items:start | end | strech;
垂直对齐方式： align-items: start | end | center | stretch;
     [若项目没有设置宽高，则默认适用 justify-items:stretch ]
复合写法： place-items:垂直对齐方式 水平对齐方式;

     [假定为3x3的网格]
垂直网格线： grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
水平网格线： grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
     [默认名称为1,2,3,4(-4,-3,-2,-1) 且不会被覆盖]

合并列：
grid-column-start: 合并起点的纵向网格线名称;
grid-column-end: 合并终点的纵向网格线名称;
合并行：
grid-row-start: 合并起点的纵向网格线名称;
grid-row-end: 合并终点的纵向网格线名称;
复合写法：
合并列： grid-column:start/end
合并行： grid-row:start/end

     [假定为3x3的网格]
指定网格区域：

     [单引号、双引号皆可]
     [区域名称可单行显示也可折行显示]
     [无用区域可用.来表示]

分配项目： grid-area:区域名称;
     [若指定区域为复数且相邻为长方形或正方形时，会自动合并]
     [指定时区域名称不用引号]