《Python+Kivy(App开发)从入门到实践》自学笔记：GridLayout布局

章节目录与知识点总揽

2.5 GridLayout布局

GridLayout——网格布局

        在Kivy中，为了将子部件排列成多行多列的矩阵，可以使用GridLayout布局方式。他会根据布局的配置，按照子部件的索引顺序为每一个小部件分配位置。

        在使用GridLayout布局时，必须设置具体列数（cols）或者行数(rows)中的一个约束，否则程序不能够执行。只要指定了具体的行数或列数，当子部件发生变化时，GridLayout布局就会根据该值进行扩展，但不会超过界限值。

2.5.1 使用步骤

        １．新建一个main.py文件。

        ２．导入App类以及相关的包，例如：GridLayout、Button

        ３．创建一个类让它继承App类。

        ４．在该类内实现build()方法

        ５．编写具体的布局或布局类，让其继承GridLayout类。

        ６．在build()方法结尾返回具体的布局或布局类。

        ７．通过run()方法运行实例。

2.5.2 在py内使用GridLayout布局

        新建main.py文件，内容如下：

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.graphics import Rectangle,Color


class GridLayoutWidget(GridLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

        #设置背景色，可忽略
        with self.canvas:
            Color(1,1,1,1)
            self.rect = Rectangle(pos=self.pos,size=self.size)
            self.bind(pos=self.update_rect,size=self.update_rect)
        #指定数列（行数使用rows表示）
        self.cols=3
        #添加按钮
        for i in range(5):
            btn = Button(text=str(i))
            self.add_widget(btn)

    def update_rect(self,*args):
        #设置背景尺寸，可忽略
        self.rect.pos = self.pos
        self.rect.size = self.size
class GridApp(App):
    #实现App类的build()方法（继承自App类）
    def build(self):
        return GridLayoutWidget()

if __name__ =='__main__':
    GridApp().run()

        运行main.py，由于cols属性限制为3列，所以第4个按钮自动换到下一行。执行结果如下图：

 2.5.3 在kv内使用GridLayout布局

        根据GridApp类名，新建一个grid.kv文件，更改main.py文件，内容如下：

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class GridLayoutWidget(GridLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

class GridApp(App):
    def build(self):
        return GridLayoutWidget()

if __name__ == '__main__':
    GridApp().run()

        gird.kv文件中，用padding设置间距、spacing设置间距，cols指定列数、size_hint指定按钮大小、width指定按钮宽度，具体内容如下：

<GridLayoutWidget>:
	padding:20
	spacing:20
	cols:3
	
	canvas:
		Color:
			rgba:[1,1,1,1]
		Rectangle:
			size:self.size
			pos:self.pos
	Button:
		text:'First'
	Button:
		text:'Second'
	Button:
		text:'Third'
	Button:
		text:'Fourth'

        执行main.py文件，结果如下图： 

2.5.4 默认大小

2.5.4.1使用部件本身属性为其指定大小

        可以使用部件本身的属性为其指定大小。例如：2.5.3小节的代码中为第一个按钮设置一个固定的宽度。在设置固定宽度之前，需要将size_hint_x属性设置为None。更新grid.kv文件内容如下：

<GridLayoutWidget>:
	padding:20
	spacing:20
	cols:3
	Button:
		text:'First'
		size_hint_x:None
		width:'100px'
	Button:
		text:'Second'
	Button:
		text:'Third'
	Button:
		text:'Fourth'

        运行mian.py，第一个按钮被设置了宽度。结果如下图：

 2.5.4.2GirdLayout为部件指定大小

        需要使用col_force_default属性，其默认值为False，表示不使用列默认宽度。将其设置为True，并且在子级为设置width和size_hint_x属性的情况下，使用默认的列宽。列宽默认值为0，所以还要为其指定一个具体的值。代码如下：

<GridLayoutWidget>:
	padding:20
	spacing:20
	cols:3
	col_force_default:True
	col_default_width:120
	Button:
		text:'First'
		size_hint_x:None
		width:'100px'
	Button:
		text:'Second'
	Button:
		text:'Third'
	Button:
		text:'Fourth'

        运行main.py，除了第一个，其它按钮都设置成了默认宽度。结果如下图：

         使用同样方法，可以设置row_force_default和row_default_height属性设置默认行高，代码如下：

<GridLayoutWidget>:
	padding:20
	spacing:20
	cols:3
	col_force_default:True
	col_default_width:120
	row_force_default:True
	row_default_height:40

	Button:
		text:'First'
		size_hint_x:None
		width:'100px'
	Button:
		text:'Second'
	Button:
		text:'Third'
	Button:
		text:'Fourth'

        运行结果如下图：

 2.5.5 设置列宽行高

GridLayout可以针对每一列、每一行设置各自的宽度和高度。

        通过cols_minimum属性设置列宽，此属性接受一个字典，键为列号，值为具体像素值。例如：将第一列设置为130px，第二列设置成140px，代码如下：

<GridLayoutWidget>:
	padding:20
	spacing:20
	cols:3
	col_force_default:True
	col_default_width:120
	row_force_default:True
	row_default_height:40

	cols_minimum:{0:130,1:140}

	Button:
		text:'First'
		size_hint_x:None
		width:'100px'
	Button:
		text:'Second'
	Button:
		text:'Third'
	Button:
		text:'Fourth'

        运行main.py后，第一列和第二列宽度产生了区别，但第一列第一个案件未受影响。

         总结：就这几个改变宽度的方法，其作用级别：col_default_width<cols_minimum<width

        同理，也可以设置rows_minimum属性，代码如下：

<GridLayoutWidget>:
	padding:20
	spacing:20
	cols:3
	col_force_default:True
	col_default_width:120
	row_force_default:True
	row_default_height:40

	cols_minimum:{0:130,1:140}
	rows_minimum:{0:60}

	Button:
		text:'First'
		size_hint_x:None
		width:'100px'
	Button:
		text:'Second'
	Button:
		text:'Third'
	Button:
		text:'Fourth'

        运行结果如下图：

上一篇：AnchorLayout布局

下一篇：PageLayout布局