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

章节目录与知识点总揽

2.4 AnchorLayout布局

AnchorLayout——锚点布局

        可以将子部件设置在左上、中上、右上、左中、正中、右中、左下、中下、右下共9个位置。

布局的使用方法：指定anchor_x和anchor_y属性即可。

2.4.1使用步骤：

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

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

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

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

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

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

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

2.4.2 在py内使用AnchorLayout布局

        新建main.py文件，代码如下：

from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.button import Button
from kivy.graphics import Rectangle,Colorclass AnchorLayoutWidget(AnchorLayout):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)#嵌套第一个布局anchor_first = AnchorLayout(anchor_x='left',anchor_y='top')#添加按钮anchor_first.add_widget(Button(text='Hello',size_hint=[.3,.2]))#嵌套第二个布局anchor_second = AnchorLayout(anchor_x='right',anchor_y='bottom')#添加按钮anchor_second.add_widget(Button(text='Anchor',size_hint=[.3,.2]))#添加到父布局中self.add_widget(anchor_first)self.add_widget(anchor_second)def update_rect(self,*args):#设置背景尺寸，可忽略self.rect.pos = self.posself.rect.size = self.sizeclass AnchorApp(App):def build(self):return AnchorLayoutWidget()if __name__ == '__main__':AnchorApp().run()

        运行结果如下图：

 2.4.3 在kv内使用AnchorLayout布局

        根据AnchorApp类名新建一个anchor.kv文件，修改main.py文件内容，具体如下：

from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayoutclass AnchorLayoutWidget(AnchorLayout):def __init__(self,**kwargs):super().__init__(**kwargs)class AnchorApp(App):def build(self):return AnchorLayoutWidget()if __name__ == '__main__':AnchorApp().run()

        anchor.py文件内容如下：

<AnchorLayoutWidget>:padding:20AnchorLayout:anchor_x:'left'anchor_y:'top'Button:text:'Hello'size_hint:.3,.2AnchorLayout:anchor_x:'right'anchor_y:'bottom'Button:text:'Anchor'size_hint:.3,.2

        运行main.py程序，因为背景设置为黑色，其他与在py内执行结果一致。具体结果如下图：

上一篇：BoxLayout布局

下一篇：GridLayout布局