前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Kivy 5种常用图形界面布局初探

Kivy 5种常用图形界面布局初探

作者头像
州的先生
发布2021-03-03 14:35:23
3.1K0
发布2021-03-03 14:35:23
举报
文章被收录于专栏:州的先生州的先生

对于任何图形界面的框架而言,布局都是非常重要的一个组成部分。

它就像人体的骨骼、房屋的钢筋混凝土梁架,支撑起整个图形界面、条理好各个小部件的位置。

在 Web 开发的前端 CSS 中,最常见的有栅格布局、绝对布局和相对布局。

在 Python 的 PyQt5 中,州的先生比较常使用的时网格布局、垂直布局和水平布局。

而 Kivy 也提供了不少的布局方式,供我们在使用 Kivy 开发跨平台的图形界面程序时使用。

Kivy 提供的布局方式

Kivy 中所有的布局模块都位于kivy.uix中,比如:

浮动布局:

代码语言:javascript
复制
from kivy.uix.floatlayout import FloatLayout

相对布局:

代码语言:javascript
复制
from kivy.uix.relativelayout import RelativeLayout

固定布局:

代码语言:javascript
复制
from kivy.uix.anchorlayout import AnchorLayout

网格布局:

代码语言:javascript
复制
from kivy.uix.gridlayout import GridLayout

堆叠布局:

代码语言:javascript
复制
from kivy.uix.stacklayout import StackLayout

使用方式也很简单,实例化之后,调用add_widget()方法将小部件添加进入即可。

下面,我们就通过一些实例来了解 Kivy 的几种常用图形界面布局。

浮动布局

在浮动布局中,小部件基本上不受限制,浮动在布局中。我们通过设置小部件的大小和位置,来自由地控制布局内的小部件。

相对布局

RelativeLayout 相对布局和浮动布局类似,但是浮动布局内的小部件是基于布局层的绝对定位,而相对布局使用的则是相对定位。

固定布局

AnchorLayout固定布局用于固定布局层内小部件的位置,可以将小部件固定在左侧、右侧、顶部、底部和中央。

不同于上述的布局方式,固定布局需要在实例化的时候指定固定方式的参数:

anchor_x参数表示 X 轴坐标的固定方式,接受left、center和right;•anchor_y参数表示 Y 轴坐标的固定方式,接受top、center和bottom;

网格布局

网格布局GridLayout在各类图形界面开发中都是很常用的布局层。通过行和列的设置,它可以灵活地自适应地控制小部件在布局层中的位置。

实例化的 GridLayout() 必须指定行rows、列cols 中至少一个值,不然将会抛出异常。例如:

代码语言:javascript
复制
GridLayout(cols=2)

堆叠布局

堆叠布局 StackLayout 用于垂直或水平地排列小部件。堆叠布局支持以下两种方式来控制小部件的排列:

lr-tb:从左到右,然后从上到下地排列;•tb-lr:从上到下,然后从左到右地排列;

通过布局的orientation来设置上述的堆叠方式,例如:

代码语言:javascript
复制
StackLayout(orientation='lr-tb')

最后

上面就是 Kivy 中比较常见的几种图形界面的介绍了。上面介绍的几个图形界面布局实例均来自于觅道文档的在线教程《使用Kivy构建现代桌面GUI应用》,如果需要上述布局实例的代码,可以点击“阅读原文”进行查看。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-02-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 州的先生 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 浮动布局
  • 相对布局
  • 固定布局
  • 网格布局
  • 堆叠布局
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档