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, .5GridLayout (网格布局)
可以将子部件排列成多行多列的矩阵，根据布局配置按照子部件的索引为每一个子部件分配位置。新建网格布局的时候，需要设置具体的行（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'
Alipay
Wechat 最后一次更新于2021-08-11 16:31:48
0 条评论