【Kivy】布局 AnchorLayout、GridLayout [学习分享]（三）

本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。
定期会更新文章到www.sea-whales.cn我的个人网站中，有兴趣的小伙伴可以进来看看、

AnchorLayout布局（锚点布局）

锚点布局可以将子部件放在 左上、中上、右上、左中、正中、右中、左下、中下、右下 ，9个位置处。只需要指定anchor_x和anchor_y属性即可。

• anchor_x 默认值为center,可以且只可以接受left、right、center,分别为左、右和中。
• • anchor_y 默认值为center,可以且只可以接受top、bottom、center,分别为上、下和中。

python代码实现如下：

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.button import Button
from kivy.graphics import Rectangle, Color


class AnchorLayoutWidget(AnchorLayout):
    def __init__(self):
        super(AnchorLayoutWidget, self).__init__()

        # 设置颜色
        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)

        # 嵌套第一个布局
        anchor_first = AnchorLayout(anchor_x='left', anchor_y='top')
        anchor_first.add_widget(Button(text='left-top', size_hint=[.3, .3], background_color=[0, 0, 0, 1]))

        # 嵌套第二个布局
        anchor_second = AnchorLayout(anchor_x='center', anchor_y='top')
        anchor_second.add_widget(Button(text='center-top', size_hint=[.3, .3], background_color=[0, 0, 1, 1]))

        # 嵌套第三个布局
        anchor_third = AnchorLayout(anchor_x='right', anchor_y='top')
        anchor_third.add_widget(Button(text='right-top', size_hint=[.3, .3], background_color=[0, 1, 1, 1]))

        # 嵌套第四个布局
        anchor_fourth = AnchorLayout(anchor_x='left', anchor_y='center')
        anchor_fourth.add_widget(Button(text='left-center', size_hint=[.3, .3], background_color=[1, 1, 0, 1]))

        # 嵌套第五个布局
        anchor_fifth = AnchorLayout(anchor_x='center', anchor_y='center')
        anchor_fifth.add_widget(Button(text='center-center', size_hint=[.3, .3], background_color=[0, 1, 0, 1]))

        # 嵌套第六个布局
        anchor_sixth = AnchorLayout(anchor_x='right', anchor_y='center')
        anchor_sixth.add_widget(Button(text='right-center', size_hint=[.3, .3], background_color=[1, 0, 1, 1]))

        # 嵌套第七个布局
        anchor_seventh = AnchorLayout(anchor_x='left', anchor_y='bottom')
        anchor_seventh.add_widget(Button(text='left-bottom', size_hint=[.3, .3], background_color=[0, 1, .5, 1]))

        # 嵌套第八个布局
        anchor_eighth = AnchorLayout(anchor_x='center', anchor_y='bottom')
        anchor_eighth.add_widget(Button(text='center-bottom', size_hint=[.3, .3], background_color=[1, .5, 1, .5]))

        # 嵌套第九个布局
        anchor_ninth = AnchorLayout(anchor_x='right', anchor_y='bottom')
        anchor_ninth.add_widget(Button(text='right-bottom', size_hint=[.3, .3], background_color=[.5, 1, 1, .5]))

        self.add_widget(anchor_first)
        self.add_widget(anchor_second)
        self.add_widget(anchor_third)
        self.add_widget(anchor_fourth)
        self.add_widget(anchor_fifth)
        self.add_widget(anchor_sixth)
        self.add_widget(anchor_seventh)
        self.add_widget(anchor_eighth)
        self.add_widget(anchor_ninth)

    def update_rect(self, *args):
        self.rect.pos = self.pos
        self.rect.size = self.size


class AnchorLayoutApp(App):
    def build(self):
        return AnchorLayoutWidget()


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

或者配合kv文件进行布局：
python代码如下：

# !/usr/bin/env python3
# -*- coding: utf-8 -*-


from kivy.app import App
from kivy.uix.boxlayout import BoxLayout


class BoxLayoutWidget(BoxLayout):
    def __init__(self, **kwargs):
        super(BoxLayoutWidget, self).__init__(**kwargs)


class BoxLayoutTApp(App):
    def build(self):
        return BoxLayoutWidget()


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

kv文件如下：

<Button>
    font_size: 10
    size_hint: .3, .3

<AnchorLayoutWidget>
    padding: 20

    AnchorLayout:
        anchor_x: 'left'
        anchor_y: 'top'
        Button:
            background_color: 0, 0, 0, 1
            text: 'left-top'

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'top'
        Button:
            text: 'center-top'
            background_color: 0, 0, 1, 1

    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'top'
        Button:
            text: 'right-top'
            background_color: 0, 1, 1, 1

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        Button:
            text: 'center-center'
            background_color: 1, 1, 0, 1

    AnchorLayout:
        anchor_x: 'left'
        anchor_y: 'center'
        Button:
            text: 'left-center'
            background_color: 0, 1, 0, 1

    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'center'
        Button:
            text: 'right-center'
            background_color: 1, 0, 1, 1

    AnchorLayout:
        anchor_x: 'left'
        anchor_y: 'bottom'
        Button:
            text: 'left-bottom'
            background_color: 0, 1, .5, 1

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'bottom'
        Button:
            text: 'center-bottom'
            background_color: 1, .5, 1, .5

    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'bottom'
        Button:
            text: 'right-bottom'
            background_color: .5, 1, 1, .5

GridLayout (网格布局)

可以将子部件排列成多行多列的矩阵，根据布局配置按照子部件的索引为每一个子部件分配位置。新建网格布局的时候，需要设置具体的行（cols）和列（rows）数，作为约束。否则设置是无效的。
设置具体的行列后，当子部件变化时，布局就会根据改值进行扩展，但是总数不会超过设置的上限值。

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

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):
        super(GridLayoutWidget, self).__init__()

        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)

        self.cols = 3
        self.rows = 3

        for i in range(8):
            btn = Button(text=f'BTN_{i}', background_color=(0.2, .2, .4))
            self.add_widget(btn)

    def update_rect(self, *args):
        self.rect.pos = self.pos
        self.rect.size = self.size


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


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

配合kv文件代码如下：

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

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


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


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


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

kv代码

<Button>
    font_size: 10
    size_hint: .3, .4

<GridLayoutWidget>
    rows:3
    cols:3
    padding: 15
    spacing: 20
    Button:
        background_color: 0, 1, 0, 1
        text: 'btn_1'

    Button:
        background_color: .1, 0, 1, 1
        text: 'btn_2'

    Button:
        background_color: 0, .5, .4, 1
        text: 'btn_3'

    Button:
        background_color: 0, 1, 0, .5
        text: 'btn_4'

GridLayout设置布局大小

GridLayout布局种，可以使用部件本身属性为其指定大小，若要对部件设置固定宽度，在设置之前则需要将size_hint_x设置为None。

GridLayout为部件指定大小

需要使用col_force_default属性，其默认值False,表示不使用列默认宽度。需要将col_force_default设置为True。并且在没有给子部件设置width和size_hint_x的属性的情况下,使用默认的列宽。列宽的默认值为0。所以还需要指定一个具体的值，使用col_default_width可以设置成功。同上，对与设置行高也可以相同的方法将row_force_default设置True,并且row_default_height设置值。

设置列宽行高

布局的宽高

可以使用cols_minimum设置属性的列宽，cols_minimum属性接受的值是一个字典，字典的键为列号，值为像素值。例如:cols_minimum:{0: 130, 1:140}
将第一列设置为130像素，第二列设置为140像素。
执行一下代码后，可以发现，从执行顺序的优先级来说，可以按照如下顺序： col_default_width < cols_minimum < width。
同理，也可以通过rows_minimum设置属性的行高rows_minimum: {0: 50}。
可参考如下kv代码：

<Button>
    font_size: 50
    size_hint: .3, .4


<GridLayoutWidget>

    rows:3  # 设置行数
    cols:3  # 设置列数
    padding: 15 # 设置间距
    spacing: 20 # 设置间距
    col_force_default: True # 强制使用默认列宽
    col_default_width: 200 # 设置默认，列宽
    row_force_default: True # 强制使用默认行高
    row_default_height: '34px' # 设置默认行高
    
    cols_minimum:{0: 130, 1:140}  # 设置列宽
    rows_minimum: {0: 50} # 设置行高
    canvas:
        Color:
            rgba: .3,.3,.5,.5
        Rectangle:
            size: self.size
            pos: self.pos
    Button:
        background_color: 0, 1, 0, 1
        text: 'btn_1'
        size_hint_x: None
        width: '300px'

    Button:
        background_color: .1, 0, 1, 1
        text: 'btn_2'

    Button:
        background_color: 0, .5, .4, 1
        text: 'btn_3'

    Button:
        background_color: 0, 1, 0, .5
        text: 'btn_4'