# kv-demo **Repository Path**: gnnow/kv-demo ## Basic Information - **Project Name**: kv-demo - **Description**: No description available - **Primary Language**: Python - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-05-27 - **Last Updated**: 2021-05-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # kv-demo #### Kivy介绍 　　Kivy,也被称为kvlang或KV。Kivy在2011Euro Python上，作为一个开源的Python框架被开发出来，主要用于快速开发创建用户界面。其致力于描述使用者界面与使用者互动，就像QML，它能够简单地构建整个使用者界面并加上互动功能。例如，一个包括档案的浏览器和带 “取消” / “载入” 按钮的对话框。它能够应用Python快速地铺垫基本的控件，之后用Kivy造出使用者的界面。 　　Kivy 可以在多平台上运行，可以说是真正地做到了 Java 曾经允诺的 “Once Write Run Anywhere” 的效果，它还支持大部分原生输入协议和设备，包括 WM_Touch、WM_Pen、Mac OS X Trackpad 和 Magic Mouse、Mtdev、Linux Kernel HID 和 TUIO。此外，Kivy 还包括一个多点触控的鼠标模拟器。 #### Kivyde特征 　　Kivy是一个GUI图形用户界面（英文名称为graphical user interface）工具，用来轻松创建跨平台的Python应用。其主要特征如下： - 兼容性：Kivy开发的软件可以在Linux、Mac OS X、Windows、Android、IOS和Raspberry Pi等主流平台上运行； - 硬件加速：Kivy图形引擎是基于OpenGl ES 2构建的，使用的是最新的、快速的图形管线，该工具包带有20多个小部件，且全部高度可扩展。许多部分使用Python编写，并通过了回归测试； - 原生界面：Kivy填补了不同输入方式间的缝隙，允许开发人员用相同的代码处理不同的输入方式，包括鼠标和触摸屏； - Python开发：由于Kivy使用Python开发，Python的标准库和PyPI第三方库都可以使用，许多著名的模块（如Pygame、SDL、GStreamer等）只是Kivy的一部分； - 商业友好性：根据MIT许可证（从1.7.2本版开始）和LGOL 3的先前版本，Kivy是100%免费使用的。该工具是专业开发的。任何人都可以在商业产品中使用，并且Kivy框架目前比较稳定，且有完美的API，以及帮助新人入门的编程指南。 #### 安装教程 1. ##### 创建隔离环境 ``` # 安装virtualenv C:\>pip install virtualenv # 创建项目目录 C:\>md E:\PythonProject # 切换目录 C:\>cd E:\PythonProject # 创建虚拟环境 E:\PythonProject>virtualenv kv-demo-env ``` 2. ##### 安装 Kivy ``` # 安装依赖项 python -m pip install docutils pygments pypiwin32 kivy.deps.sdl2 kivy.deps.glew # 以下命令二选一（建议全执行） python -m pip install kivy.deps.gstreamer # 在python3.5版本之后也可以安装kivy_deps.angle替换kivy_deps.gstreamer python -m pip install kivy_deps.angle # 安装kivy python -m pip install kivy # 安装示例（可选） python -m pip install kivy_examples ``` #### 将程序打包 1. xxxx 2. xxxx 3. xxxx #### 控件大小 　　Kivy的控件大小是用size和size_hint属性表示。在Kivy中，对于控件大小的控制，一般用size_hint属性，传入的值（必须为0~1之间），代表宽（或高），于当前窗口的宽（或高）的比例值，例如：[0.2, 0.15]，当然也可以使用省略0的简单写法，即[.2, .15]。 　　这里也可以用size属性，使用size属性的需要为宽和高指定一个固定的值，这就代表着控件的款和高不会因为设备而改变，同时在使用size属性时，size_hint属性必须设置为[None,None]。 #### 控件位置 　　Kivy的控件位置是用pos属性直接指定具体的值，例如[100, 200]。同时也可以使用pos_hint属性，通过比例值（0~1之间的值）进行设置。比例值的计算方式为：把窗口看成是一个一左下角为起点（0，0）的坐标系，横向为x轴，纵向为y轴，假设窗口的宽度为W、长度为L，那么窗口的任意一点的值为[y/W, x/L]。 　　对于一个控件来说，在x轴上可以确定三条线：左边界x线、正中间center_x线，右边界right线，同时在y轴上可以确定三条线：上边界top线、正中间center_y线、下边界y线，所有对于一个大小已经确定的控件，其同一位置最少有9种（x轴和y轴的线两两组合有9种组合方式）。 　　在使用pos_hint属性时我们必须传入一个字典型值，例如：{"center_x":0.5, "y":0.1}，需要特别注意的是，这里的大括号“{}”不可以省略。 #### 布局 ##### FloatLayout 布局 　　FloatLayout是浮动布局，它允许将部件通过位置和尺寸放置在窗口的任意位置。在使用FloatLayout时，我们可以根据当前窗口的大小和高度放置小部件。尤其是在不同的分辨率的移动设备中，当窗口的尺寸改变时，放置在窗口内的子部件也会相应地调整大小和位置，使用FloatLayout布局可以保证应用不会因为窗口的大小改变，而使布局乱作一团。 FloatLayout 布局python引入的 [demo](https://gitee.com/lililove2000/kv-demo/blob/master/2.03_FloatLayout/) FloatLayout 布局 kv 写法的 [demo](https://gitee.com/lililove2000/kv-demo/blob/master/2.04_FloatLayout_kv/) ------ ##### BoxLayout 布局 　　BoxLayout称为盒子布局，是一种可以将子部件水平或垂直排列的布局。在Kivy中，可以使用BoxLayout进行水平或垂直的排列子部件，它类似于Android中的线性布局。如果不设置任何大小，子部件将会以10像素的间距平分父窗口的大小。 BoxLayout 布局python引入的 [demo](https://gitee.com/lililove2000/kv-demo/blob/master/2.05_BoxLayout/) BoxLayout 布局 kv 写法的 [demo](https://gitee.com/lililove2000/kv-demo/blob/master/2.06_BoxLayout_kv/) ###### 改变方向 　　BoxLayout默认使用水平（horizontal）排列的方式，这里还可以指定orientation属性来设置方向。例如，想要设置成垂直的方式： ```python layout = BoxLayout(orientation = "vertical") # 布局方向（垂直） ``` BoxLayout 布局方向 [demo](https://gitee.com/lililove2000/kv-demo/blob/master/2.07_BoxLayout_方向/) ###### 设置间距 在 BoxLayout 布局中，一般将间距分为以下两种形式： - 布局和子级之间填充需要使用 padding，默认为[0，0，0，0] - 子级和子级之间填充需要使用 spacing，默认为0。 　　在使用 padding 时，其四个参数分别为[padding_left, padding_top, padding_right, padding_bottom]，分别代表着左边距、上边距、右边距和下边距。同时 padding 还接受两个参数的形式[padding_horizontal, padding_vertical]，分别代表着水平间距和垂直间距，或者是一个参数的形式[padding]周围边距。 　　相比于 padding 属性， spacing 属性的使用就简单了很多，直接指定具体像素值即可。 BoxLayout 布局间距 [demo](https://gitee.com/lililove2000/kv-demo/blob/master/2.08_BoxLayout_间距/) ------ ##### AnchorLayout 布局 　　AnchorLayout 为锚点布局。在使用 AnchorLayout 布局时，可以将子部件设置在左上、中上、右上、左中、正中、右中、左下、中下、右下共9种位置处。AnchorLayout 布局的使用方法也很简单，只需要指定 anchor_x 和 anchor_y 两个属性即可。 **注意：** ​ anchor_x 和 anchor_y 仅能设置为以下参数： ​ anchor_x：默认为 'center'，可接受 "left" "center" 或 "right" 值，分别表示左、中、右。 ​ anchor_y：默认为 'center'，可接受 "top" "center" 或 "bottom" 值，分别表示上、中、下。 AnchorLayout 布局 Python 引入 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.09_AnchorLayout) AnchorLayout 布局 Kv 写法 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.10_AnchorLayout_kv) ------ ##### GridLayout 布局 　　GridLayout 为网格布局。在 Kivy 中，为了将子部件排列成多行多列的矩阵，可以使用 GridLayout 布局方式，它会根据布局的配置，按照子部件的索引顺序为每个小部件分配位置。在使用 GridLayout 布局的过程中，必须设置具体的列数 （cols）或者行数（rows）中的一个约束，否则程序将不能够执行。 　　只要指定了具体的行或列，当子部件发生变化时，GridLayout 布局就会根据该值进行扩展，但不会超过界限值。 Grid Layout 布局 Python 引入 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.11_GridLayout/) Grid Layout 布局 Kv 写法 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.12_GridLayout_kv/) ###### GridLayout 布局的大小 　　在 GridLayout 布局中，可以使用部件本身的属性来为其指定大小，例如，可以在 2.12_GridLayot_kv/[grid.kv](https://gitee.com/lililove2000/kv-demo/tree/master/2.12_GridLayout_kv/grid.kv) 代码中为第一按钮设置一个固定的宽度。在设置固定的宽度之前，需要将 size_hint_x 属性设置为 None，关键代码如下： 　　当然，GridLayout 布局也可以为布局指定大小，此时需要使用 col_force_default 属性，其默认值为 False， 表示不使用列默认宽度。如果将 col_force_default 属性设置为 True 时，并且在子级为设置具体的值，使用 col_default_width 设置，代码如下： 　　使用同样的方法，也可以通过 row_force_default 和 row_default_height 属性设置行高，具体代码如下： [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.13_GridLayout_%E5%B8%83%E5%B1%80%E7%9A%84%E5%A4%A7%E5%B0%8F) ``` # 定义页面 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" ``` ###### 设置列宽行高 　　这里可以通过 cols_minimum 属性设置列宽，这里要注意的是 cols_minimum 属性接受的值是一个字典，字典键为列号，值为具体的像素值。例如，将第一列下载为 130px ；第二列下载成 140px，可以按如下添加： ``` cols_minimum: {0:130, 1:140} ``` 同理，也可以通过 rwos_minimum 属性设置行高，代码如下： ``` rows_minimum: {0:60} ``` [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.14_GridLayout_%E5%B8%83%E5%B1%80%E7%9A%84%E5%AE%BD%E9%AB%98) ``` # 定义页面 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" ``` ------ ##### PageLayout 布局 　　PageLayout 布局与其他的布局方式不同，它更倾向于动态布局，使用 PageLayout 布局可以创建一个简单的多页面的布局，开发者可以在这些页面之间轻松地翻转。由于该布局将每个子部件都作为一个单独的页面，使用当前并不支持 size_hint 和 pos_hint 等属性。 PageLayout 布局 Python 引入 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.15_PageLayout) PageLayout 布局 kv 写法 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.16_PageLayout_kv) ``` # 定义页面 Button: # 添加按钮 text: "page0" # 按钮显示的文本 background_color: 0.3, 0.3, 0.3, 1 # 设置背景颜色 Button: text: "page1" background_color: 0.9, 0.3, 0.3, 1 Button: text: "page2" background_color: 0.3, 0.9, 0.3, 1 Button: text: "page3" background_color: 0.3, 0.3, 0.9, 1 ``` ###### PageLayout 布局基本属性 　　PageLayout 布局使用 border 属性可以指定两边边界的大小，默认为 50dp。在实例[2.16的 .kv](https://gitee.com/lililove2000/kv-demo/blob/master/2.16_PageLayout_kv/page.kv) 文件内添加 border 属性，设置边界为 100dp，我们还可以通过 page 属性设置当前页面默认显示哪一页，通过 swipe_threshold 属性设置翻页的灵敏度，再通过 anim_kwargs 属性设置翻页动画于其持续时间，具体代码如下： ``` # 定义页面 border: "100dp" # 设置边界宽度 anim_kwargs: {"d":10, "t":"linear"} # 设置翻页动画及持续时间 page: 2 # 设置默认第几页为当前页 swipe_threshold: 0.8 # 设置翻页灵敏度 Button: # 添加一个按钮 text: "page0" # 按钮显示的文本 background_color: 0.3, 0.3, 0.3, 1 # 设置背景颜色 Button: text: "page1" background_color: 0.9, 0.3, 0.3, 1 Button: text: "page2" background_color: 0.3, 0.9, 0.3, 1 Button: text: "page3" background_color: 0.3, 0.3, 0.9, 1 ``` PageLayout 布局基本属性的 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.17_PageLayout_%E5%9F%BA%E6%9C%AC%E5%B1%9E%E6%80%A7) ------ ##### RelativeLayut 布局 　　RelativeLayout 为相对布局，它的布局操作方式于 FloatLayout 布局基本一致，但是它的定位属性 x、center_x、right、y、center_y、top 是相对于父布局的大小，而不是窗口的大小。但实际上，无论对于哪个布局，当布局的位置属性更改时，小部件都会移动。 RelativeLayout 布局 Python 引入 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.18_RelativeLayout) RelativeLayout 布局 kv 写法 [demo](https://gitee.com/lililove2000/kv-demo/tree/master/2.19_RelativeLayout_kv) relative.kv 文件说明 ```