在RedHat 9.4上部署Jenkins，你需要遵循一系列步骤来确保Jenkins能够成功安装并运行。以下是一个详细的步骤指南：

一、准备工作

1. 检查系统要求：

   • 确保RedHat 9.4系统满足Jenkins的最低系统要求，包括JDK版本（通常建议Java 8及以上版本，但具体取决于Jenkins的版本）。
   • 确认系统已安装wget、curl等必要的工具，以便下载和安装软件。

2. 安装Java（如果尚未安装）：

   • Jenkins需要Java环境来运行。你可以通过RedHat的包管理器安装Java。例如，使用yum安装OpenJDK：

     1	sudo yum install java-11-openjdk

   • 验证Java安装：

     1	java -version

二、安装Jenkins

1. 添加Jenkins仓库：

   • RedHat 9.4可能不是最新的RedHat版本，但你可以尝试使用Jenkins提供的官方仓库。如果官方仓库不支持RedHat 9.4，你可能需要下载Jenkins的RPM包或使用其他方式安装。
   • 如果Jenkins官方仓库支持，你可以通过以下命令添加Jenkins仓库：

     1 2	sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

   • 注意：这些命令可能因Jenkins仓库的更新而有所变化，请访问Jenkins官网获取最新信息。

2. 通过YUM安装Jenkins：

   • 如果Jenkins仓库已添加，你可以使用yum命令安装Jenkins：

     1	sudo yum install jenkins

   • 安装完成后，Jenkins服务将自动启动。如果没有自动启动，你可以使用以下命令启动它：

     1	sudo systemctl start jenkins

3. 配置Jenkins端口（可选）：

   • 如果需要更改Jenkins的默认端口（8080），你可以编辑Jenkins的配置文件。但请注意，RedHat 9.4可能使用较旧的systemd版本，配置方式可能与较新系统略有不同。
   • 通常，Jenkins的配置文件位于/etc/sysconfig/jenkins或/etc/default/jenkins，但具体取决于你的系统配置。

三、访问Jenkins

1. 开放防火墙端口（如果防火墙已启用）：

   • 如果你更改了Jenkins的端口，确保防火墙允许访问该端口。
   • 使用firewall-cmd（如果你的系统使用firewalld）或相应的防火墙管理工具来开放端口。

2. 访问Jenkins Web界面：

   • 在浏览器中访问http://<your-server-ip>:8080（如果更改了端口，请相应更改URL）。
   • 首次访问时，Jenkins会要求你输入管理员密码。你可以在/var/lib/jenkins/secrets/initialAdminPassword文件中找到这个密码。

3. 安装插件和配置Jenkins：

   • 按照屏幕上的指示安装推荐的插件。
   • 创建一个管理员用户并配置Jenkins。

四、后续步骤

• 安装和配置必要的插件：根据你的需求安装Maven Integration、Git Parameter、NodeJS等插件。
• 配置全局工具：在Jenkins的系统管理中配置JDK、Maven、Git等全局工具的路径。
• 创建和配置项目：根据你的项目需求创建Jenkins项目，并配置源码管理、构建触发器、构建环境等。

请注意，由于RedHat 9.4可能是一个较旧的版本，某些步骤或命令可能与最新版本的RedHat或Jenkins有所不同。如果遇到问题，请查阅Jenkins和RedHat的官方文档或社区论坛以获取帮助。

在Linux上部署Kubernetes可以通过多种方式实现，包括使用kubeadm、Kubespray、Minikube、Rancher等。这里，我将详细介绍如何使用kubeadm在裸机上部署一个基本的Kubernetes集群。Kubeadm是Kubernetes官方提供的用于快速安装和初始化集群的工具。

步骤 1: 准备环境

1.1 系统要求

• 推荐使用Ubuntu 18.04 LTS 或 CentOS 7 以上的Linux发行版。
• 确保所有节点已安装Docker（1.13.1+）和kubelet、kubeadm、kubectl（版本兼容）。
• 禁用swap（Kubernetes 1.8+ 不支持具有启用swap的节点）。
• 确保节点之间的时间同步。

1.2 安装Docker

1
2
3
4
5
6
7
8
9
10
11

# Ubuntu 示例
sudo apt-get update
sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install -y docker-ce

# 启动Docker服务并设置开机自启
sudo systemctl start docker
sudo systemctl enable docker

1.3 安装kubeadm, kubelet, kubectl

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 设置Kubernetes仓库
sudo apt-get update && sudo apt-get install -y apt-transport-https curl
curl -s https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
cat <<EOF | sudo tee /etc/apt/sources.list.d/kubernetes.list
deb https://apt.kubernetes.io/ kubernetes-xenial main
EOF

# 安装kubeadm, kubelet, kubectl
sudo apt-get update
sudo apt-get install -y kubelet kubeadm kubectl
sudo apt-mark hold kubelet kubeadm kubectl # 阻止自动升级

# 启动kubelet
sudo systemctl enable --now kubelet

步骤 2: 初始化主节点

在选定的主节点上运行以下命令：

1

sudo kubeadm init --pod-network-cidr=10.244.0.0/16 --apiserver-advertise-address=<master-node-ip>

注意替换<master-node-ip>为你的主节点的IP地址。此命令将初始化集群，并生成一个kubeadm join命令，用于将工作节点加入到集群。

步骤 3: 配置kubectl

1
2
3

mkdir -p $HOME/.kube
sudo cp -i /etc/kubernetes/admin.conf $HOME/.kube/config
sudo chown $(id -u):$(id -g) $HOME/.kube/config

步骤 4: 安装Pod网络插件

Kubernetes需要网络插件来确保Pod之间可以相互通信。

1

kubectl apply -f https://raw.githubusercontent.com/flannel-io/flannel/master/Documentation/kube-flannel.yml

步骤 5: 添加工作节点

在每个工作节点上，使用从主节点获得的kubeadm join命令加入集群。

步骤 6: 验证集群状态

在主节点上，运行以下命令以验证集群是否运行正常：

1

kubectl get nodes

后续步骤

• 根据需要安装Helm、Metallb、Ingress Controller等Kubernetes工具。
• 部署你的应用程序到Kubernetes集群。

这些步骤概述了使用kubeadm在Linux上部署Kubernetes集群的基本过程。每个步骤都可能需要根据你的具体环境和需求进行调整。

关键路径法简介

一个大型工程或项目包括很多活动，关键路径是项目中时间最长的活动顺序，决定着可能的项目最短工期。

关键路径法（Critical path method，CPM） 是一种基于进度网络模型的方法，用网络图表示各项活动之间的相互关系，获得在一定工期、成本、资源约束条件下的最优进度安排。

关键路径法源于美国杜邦公司对于项目管理控制成本、减少工期的研究。1959年，Kelly 和 Walker 在论文 Critical Path Planning and Scheduling 中提出了关键路径法的基本原理和方法：计算所有活动的工期，确定其最早开始 ES 和最早结束 EF、最晚开始 LS 和最晚结束 LF 的时间，按照活动的相互关系形成顺序的网络逻辑 图，找到必须的最长路径即为关键路径。

关键路径法将项目分解成为多个独立的活动并确定每个活动的工期，然后用逻辑关系（结束-开始、结束-结束、开始-开始和开始-结束）将活动连接。首先使用正推法（Forward pass），从起点开始向后计算，依次计算每个顶点（事件）的最早开始时间 ES；然后再使用逆推法（Backward pass），从终点开始向前计算，依次计算每个顶点（事件）的最迟结束时间 LF。进而可以求出每条边（工序）的最早结束时间 EF 和最迟开始时间 LS。最早开始时间 ES 和最晚开始时间 LS 相等的边，就是关键路径上的边，对应的工序是关键工序。

• ES：最早开始时间（Earliest Start），指某项活动能够开始的最早时间，取决于该项活动的所有紧前工作的结束时间，由顺推法计算 ES = max{EF(preceding activities)}。
• EF：最早结束时间（Earliest Finish），指某项活动能够完成的最早时间。EF = ES+DU， DU为该活动的持续时间。
• LF：最迟结束时间（Latest Finish），指为了保证整个项目按期完成的某项活动必须完成的最晚时间，取决于该项活动的所有紧后工作的最迟开始时间，由逆推法计算 LF = min{LS(successor activities)}。
• LS：最迟开始时间（Latest Start），指为了保证整个项目按期完成的某项活动必须开始的最迟时间。LS = LF -DU，DU为该活动的持续时间。
• TF：总时差（Total float time），指在不影响总工期的条件下，一个活动可以利用的机动时间。TF = LF - EF。
• FF：自由时差（Free float time），指在不影响紧后工作最早开始时间的条件下，一个活动可能被延迟的时间。FF = min{ES(successor activities)} - EF。
  由关键路径法得到的最早/最晚的开始/结束时间并不一定就是项目进度计划，而是把既定的参数（活动持续时间、逻辑关系、提前量、滞后量和其它制约条件）输入进度模型后所得到的结果，表明活动可以在该时段内实施。

早期关键路径法的表示方法都是箭线法（ADM），随着计算机的发展，前导图（PDM）逐渐成为主流方法。

关键路径法

某项目工程由 11项作业组成（分别用 A、B、…K表示），其计划完成时间及作业间相互关系如下表所示。建立计划网络图，并计算完成该项目的最短时间。

问题分析： 用如下图所示的计划网络图表示问题描述的各项作业及作业间的相互关系。图中的顶点表示作业开始或结束的事件，顶点之间的边（箭线）表示一项作业，边的权值表示该项作业的完成时间。虚线边表示虚拟作业。 该计划网络图的关键路径长度，即为完成该项目的最短时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# mathmodel23_v1.py
# Demo23 of mathematical modeling algorithm
# Demo of critical path method (CPM)  with NetworkX
# Copyright 2021 YouCans, XUPT
# Crated：2021-07-25

import numpy as np
import matplotlib.pyplot as plt  # 导入 Matplotlib 工具包
import networkx as nx  # 导入 NetworkX 工具包

# 1. 拓扑序列(topological sequence) 和 关键路径(critical path)
# Activity on edge network(AOE), 顶点表示事件或状态，有向边表示活动
DG = nx.DiGraph()  # 创建：空的 有向图
DG.add_weighted_edges_from([(1, 2, 5), (1, 3, 10), (1, 4, 11),
                            (2, 5, 4),
                            (3, 4, 4), (3, 5, 0),
                            (4, 6, 15),
                            (5, 6, 21), (5, 7, 25), (5, 8, 35),
                            (6, 7, 0), (6, 8, 20),
                            (7, 8, 15)])  # 向图中添加多条赋权边: (n1,n2,weight)
lenNodes = len(DG.nodes)  # 顶点数量
topoSeq = list(nx.topological_sort(DG))  # 拓扑序列
nodeCP = list(nx.dag_longest_path(DG))  # 关键路径（节点）
lenCP = nx.dag_longest_path_length(DG)  # 关键路径的长度
edgesCP=[]
for k in range(1,len(nodeCP)):
    edgesCP.append((nodeCP[k-1],nodeCP[k]))

print("拓扑序列：{}".format(topoSeq))  # [1, 3, 4, 2, 5, 6, 7, 8]
print("关键路径的顶点：{}".format(nodeCP))  # [1, 3, 5, 6, 8]
print("关键路径的边：{}".format(edgesCP))  # [(1, 3), (3, 5), (5, 6), (6, 8)]
print("关键路径长度：{}".format(lenCP))  # 51

fig, ax = plt.subplots(figsize=(8,6))
pos = {1:(0,4), 2:(5,7), 3:(5,4), 4:(5,1), 5:(10,7), 6:(10,1), 7:(15,4), 8:(20,4)}  # 指定顶点位置
edgesDG = DG.edges
edgesDashed = [(3,5),(6,7)]
edgesSolid = list(set(edgesDG)-set(edgesDashed))
labels = nx.get_edge_attributes(DG, 'weight')
# nx.draw(DG, pos, with_labels=True, node_color='skyblue')  # 绘制有向图
nx.draw_networkx_nodes(DG, pos, node_color='orange',node_size=400)  # 设置指定顶点的颜色、宽度
nx.draw_networkx_labels(DG, pos)  # 设置指定顶点的标签
nx.draw_networkx_edges(DG, pos, edgelist=edgesSolid, edge_color='dimgrey', style='solid')  # 设置指定边的颜色、线型
nx.draw_networkx_edges(DG, pos, edgelist=edgesDashed, edge_color='grey', style='dashed')  # 设置指定边，虚线
nx.draw_networkx_edge_labels(DG, pos, edge_labels=labels, font_color='dimgrey')  # 显示边的权值
ax.set_title("Project network graph by youcans@xupt")
ax.text(16, 0, "youcans-xupt", color='gainsboro')
plt.xlim(-2, 22)
plt.ylim(-1, 9)
plt.axis('on')
plt.show()  # YouCans, XUPT

程序运行结果：

拓扑序列：[1, 3, 4, 2, 5, 6, 7, 8]
关键路径的顶点：[1, 3, 5, 6, 8]
关键路径的边：[(1, 3), (3, 5), (5, 6), (6, 8)]
关键路径长度：51

原文链接：(https://blog.csdn.net/youcans/article/details/118754623)

Kivy命名规则

1、类继承App的类名(小写)（除去App）+ .kv
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.graphics import Color,Rectangle
from kivy.properties import ColorProperty, ListProperty


class LoginScreen(GridLayout):
    def __init__(self, **kwargs):
        super(LoginScreen, self).__init__(**kwargs)
        self.cols = 2
        self.rows = 6
        self.add_widget(Label(text='User Name'))
        self.username = TextInput(multiline=False)
        self.add_widget(self.username)
        self.add_widget(Label(text='password'))
        self.password = TextInput(password=True, multiline=False)
        self.add_widget(self.password)
        self.button = Button(size=(.4, .63), text='iPaoMi', background_color=(0, 0, 1), font_size=15, color=(1, 0, 1))
        self.button.bind(on_press=self.on_push)

        self.add_widget(self.button)

        with self.password.canvas.before:
            Color(1, 0.5, 0, 0.5)
            self.password = Rectangle(size=self.password.size, pos=self.password.pos)

    def on_push(self, inst):
        print('inst'+inst.text)
        self.button.text = inst.text
        self.button.height=12


class MyApp(App):
    def build(self):
        self.root = root = LoginScreen()
        return root


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

创建的kv文件则为 my.kv
代码分离规则：
定义页面:
使用<>:创建一个页面，页面和py里的类一致。
例如：
且使用缩进标识控件和属性的隶属关系。

<LoginScreen>:
    BoxLayout:
        Button:
    BoxLayout:
        Button:
<LoginScreen>:

使用kv文件则无须使用Py文件进行编写布局，可直接如下:

1
2

class LoginScreen(App):
    pass

其实kv文件读取我们也可以直接将文件内容以字符串形式写在任意变量内，任何使用,如下

from kivy.lang import Builder
Builder.load_string("""
    <LoginScreen>:
        BoxLayout:
            Button:
        BoxLayout:
            Button:
    <LoginScreen>:
""")
class LoginScreen(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

class MyApp(App):
    def build(self):
        return LoginScreen()   # Kivy会自动缩放根控件，

if __name__ == "__main__":
    MyApp().run()

Kivy 中文显示

Kivy 属性

位置和尺寸（大小）

尺寸 （大小）

大小有两种写法一种是 size 另一种是 size_hint

size

传入的值是一个固定的宽高值

size_hint

传入的是按照当前窗口比例的宽高值，一般写做如下：

size_hint: .4, .5
或者
size_hint: 0.4, 0.5

位置

位置也有和大小一样的两种属性，一种pos另一个是pos_hint

pos

pos: 

pos_hint

按照宽高比例的写法是允许省略0的写法。
比例值的计算是以左下角为坐标系起点（0，0），横向为x轴，纵向为y，假设宽为W，高为L，则窗内任意一点的比例值为[W/x,L/y]
相对于控件， x轴上有三条边可以确定位置:

•    左边界x
  

•    正中间线center_x
  

•    右边界right
  

同样，y轴也有三条可以确定位置：

•    上边界top
  

•    正中间线center_y
  

•    下边界y
  

X轴和Y轴各有三种他们两两组合共有9种写法可以确定一个位置。

pos_hint: {'x': .8, 'y': .4}
或
pos_hint： {'right': .7, 'top': .3}
或者
pos_hint： {'center_y': .7, 'center_x': .3}

以上x、y、right、top、center_y、center_x都是以控件为主，距离布局窗体的X轴和Y轴。

布局

FloatLayout

py文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout


class FloatLayoutWidget(FloatLayout):
    def __init__(self):
        super(FloatLayoutWidget, self).__init__()


class FloatLayoutApp(App):
    def build(self):
        return FloatLayoutWidget()


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

kv文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 自定义按钮
<Button>
    font_size: 40       # 字体大小
    size_hint: .3, .4   # 按钮大小

<FloatLayoutWidget>     # 定义页面
    canvas:             # 设置背景颜色
        Color:
            rgba: [.2, .4, .5, .6]

        Rectangle:
            size: self.size
            pos: self.pos

    Button:             # 使用自定义按钮
        text: "BT1"     # 按钮显示文本
        background_color: 1, 0, 0, 1 # 按钮背景颜色
        pos_hint: {'x': 0, 'top': 1} # 按钮位置

    Button:
        text: "BT2"
        background_color: .2, .3, .4, .5
        pos_hint: {'x': .35, 'y': .3}

    Button:
        text: "BT3"
        background_color: .5, .4, .3, .2
        pos_hint: {'x': .7, 'bottom': 0}

    Button:
        text: "BT4"
        background_color: 1, 0, 0, 1
        pos_hint: {'x': 0.7, 'top': 1}

    Button:
        text: "BT5"
        background_color: 1, 0, 0, 1
        pos_hint: {'x': 0, 'bottom': 1}

BoxLayout

盒子布局，可以将部件水平或者垂直排列的布局。类似于安卓的线性布局。如果没有限制任何大小，部件将会以10px间距平分父窗口大小。

只用Python进行布局的话如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# !/usr/bin/env python3
# -*- coding: utf8 -*-


from kivy.app import App
from kivy.graphics import Rectangle, Color
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button


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

        # 设置背景颜色
        with self.canvas:
            Color(.4, .5, .02, .3)
            self.rect = Rectangle(pos=self.pos, size=self.size)
            self.bind(pos=self.update_rect, size=self.update_rect)

        # 新建一个指定尺寸的按钮
        button1 = Button(text='Hello BoxLayout1', size_hint=(.3, .2), pos=(200, 40), background_color=(1, 1, 1, 1))
        button2 = Button(text='Hello BoxLayout2', size_hint=(.2, .2), pos=(200, 40), background_color=(.6, .5, .8, .3))

        # 将按钮加到布局内
        self.add_widget(button1)
        self.add_widget(button2)

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


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


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

或者配合kv文件进行布局：

python代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# !/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文件如下：（kv文件创建遵守kv命名规则）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<Button>
    font_size: 50

<BoxLayoutWidget>
    
    canvas:
        Color:
            rgba: [.2, .4, .5, .6]

    Button:
        text: "BT1"
        background_color: 1, 0, 0, 1

    Button:
        text: "BT2"
        background_color: 1, 1, 1, 1

    Button:
        text: "BT3"
        background_color: 0, 1, 0, 1

    Button:
        text: "BT4"
        background_color: 1, 0, 1, 1

    Button:
        text: "BT5"
        background_color: 0, 1, 1, 1

默认BoxLayout排版是纵向排版，若需要改为横向排版则可在KV文件里添加参数orientation: "vertical" 若是使用python实现则可以将实例化BoxLayout时，添加参数BoxLayout(orientation="vertical")

BoxLayout间距

BoxLayout布局中间距有两种形式：

• 布局和子级之间填充是需要使用padding，默认为[0, 0, 0, 0] ,四个参数分别为 [padding_left, padding_top, padding_right, padding_bottom] 从右下脚开始顺时针一一对应。（左，上，右，下）；同时padding还接受两个参数形式[padding_horizontal, padding_vertical] 分别是水平边距和竖直边距；或者一个参数形式[padding]代表周围边距。
• 子级和子级之间填充需要使用spacing, 默认为 0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<Button>
    font_size: 10

<BoxLayoutWidget>
    orientation: "vertical"    # 横向排版
    padding: [10, 20, 30, 40]  # 设置间距
    canvas:
        Color:
            rgba: [.2, .4, .5, .6]

    Button:
        text: "BT1"  # 显示文本，.KV默认是不支持中文
        background_color: 1, 0, 0, 1

    Button:
        text: "BT2"
        background_color: 1, 1, 1, 1
    BoxLayout:
        orientation: "vertical" # 设置间距
        spacing: 20
        Button:
            text: "BT3"
            background_color: 0, 1, 0, 1
    
        Button:
            text: "BT4"
            background_color: 1, 0, 1, 1
    
        Button:
            text: "BT5"
            size_hint_y: .15  # 设置按钮大小
            background_color: 0, 1, 1, 1

AnchorLayout布局（锚点布局）

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

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

python代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

# !/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代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# !/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）数，作为约束。否则设置是无效的。
设置具体的行列后，当子部件变化时，布局就会根据改值进行扩展，但是总数不会超过设置的上限值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# !/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文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# !/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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<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'

PageLayout 布局

PageLayou布局和前面几种布局方式是有差异的，他更倾向与动态布局，使用这个布局可以创建一个简单的多页面布局。可以在这些布局之间随意跳转，此布局每个子部件都作为一个单独的页面，所以此布局并不支持size_hint和pos_hint：
例如如下:
会生成一个可以自由左右拉的按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

from kivy.uix.pagelayout import PageLayout
from kivy.app import App
from kivy.uix.button import Button


class PageLayoutWidget(PageLayout):
    def __init__(self, **kwargs):
        super(PageLayoutWidget, self).__init__()

        btn = Button(text='btn1', background_color=[0.3,.9,.2,1])
        btn2 = Button(text='btn2', background_color=[.1,.5,.4,1])

        self.add_widget(btn)
        self.add_widget(btn2)


class PageLayoutPyApp(App):
    def build(self):
        return PageLayoutWidget()


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

KV实现布局

# pagelayout.kv
<PageLayoutWidget>
    border: '100dp'  # 设置边界，如果不设置默认为50dp
    Button:
        text:'Page0'
        background_color: 0.3, .2, .5, 1

    Button:
        text:'Page1'
        background_color: 0.4, .4, .6, 1

    Button:
        text:'Page2'
        background_color: 0.6, .6, .8, 1

    Button:
        text:'Page3'
        background_color: 0.8, .8, 1, 1

Python配合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

from kivy.app import App
from kivy.uix.pagelayout import PageLayout


class PageLayoutWidget(PageLayout):
    def __init__(self):
        super(PageLayoutWidget, self).__init__()


class PageLayoutApp(App):
    def build(self):
        return PageLayoutWidget()


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

PageLayout布局基本属性

• border : 指定两边边界大小，如果我们没有指定的话默认是50dp.前面的kv中也对这进行写入，测试时可以将对应行去掉后进行测试。
• page: 设置默认显示哪一页、
• swipe_threshold： 设置翻页灵敏度 例如: swipe_threshold: .8
• anim_kwargs: 属性设置’t‘翻页动画和’d‘持续时间，例如： anim_kwargs: {'d':10, 't': 'linear'}。 这边t中有哪些参数暂时不做过多说明，后期会细说。

可以尝试下，当以上属性都设置了，页面之间切换的动画被延长到10秒了，并且翻页的灵敏度也要滑动到80%时以上才会被判定为翻页的动作。

RelativeLayout布局

相对布局，此布局的操作方式与前面的FloatLayout基本是相同的，只是在定位的时候我们使用的x,center_x,right,y,center_y,top这些属性是想对于他的父布局的，而不是相对于窗口。
其实任何布局，当布局的位置属性更改时，小部件都会移动。
接下来我们看看如何初始化一个RelativeLayou布局。
老样子，使用python代码和kv代码文件两种方式实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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

from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.button import Button
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import Color, Rectangle


class MyButton(Button):
    # 自定义按钮属性，将公共属性提出来
    def __init__(self, **kwargs):
        super(MyButton, self).__init__(**kwargs)
        self.font_size = 20
        self.size_hint = [.2, .2]


class RelativelayoutWidget(RelativeLayout):
    pass


class BoxLayoutWidget(BoxLayout):
    def __init__(self, **kwargs):
        super(BoxLayoutWidget, self).__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)

        box_relative = RelativelayoutWidget()

        btn1 = MyButton(text='btn1', pos_hint={'right': 1, 'top': 1}, background_color=(.1, .2, .3, 1))
        btn2 = MyButton(text='btn2', pos_hint={'x': 0, 'top': 1}, background_color=(.1, .2, .3, 1))
        RelativeBtn3 = MyButton(text='RelativeBtn3', pos_hint={'center_x': .5, 'center_y': .5},
                                background_color=(.1, .2, .3, 1))
        RelativeBtn4 = MyButton(text='RelativeBtn4', pos_hint={'x': 0, 'y': 0}, background_color=(.1, .2, .3, 1))
        RelativeBtn5 = MyButton(text='RelativeBtn5', pos_hint={'right': 1, 'y': 0},
                                background_color=(.1, .2, .3, 1))

        for i in [btn1, btn2, RelativeBtn3, RelativeBtn4, RelativeBtn5]:
            box_relative.add_widget(i)

        self.add_widget(BoxLayout())
        self.add_widget(box_relative)

    def update_rect(self, *args):
        # 设置背景尺寸， 可忽略
        self.rect.pos = self.pos
        self.rect.size = self.size


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


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

以上代码运行后，会出现半边是空白，另外半边是有在四个角落和中间五个按钮，那是因为我们把按钮在第42行的时候，全部加在了Relativelayout布局内了，然后右边放空一个BoxLayout布局进行占位，不加任何控件，因为Relativelayout布局里面的控件是按照Relativelayout布局的位置和大小进行定位的，并非按照我们最开始初始化的大的那个BoxLayout布局进行定位的，所以里面的控件都是相对于Relativelayout布局的位置进行放置。
接下一样，我们用kv文件配合python 的方式去实现上面的样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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


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


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


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

kv代码

<Button>
    font_size:20
    size_hint: .2,.3

<BoxLayoutWidget>

    canvas:
        Color:
            rgba: 1,1,1,1

        Rectangle:
            size: self.size
            pos: self.pos

    BoxLayout:

    RelativeLayout:
        Button:
            text:"btn1"
            background_color: .1,.2,.3,1
            pos_hint:{'right':1, 'top':1}

        Button:
            text:"btn2"
            background_color: .1,.2,.3,1
            pos_hint:{'x': 0, 'top': 1}

        Button:
            text:"RelativeBtn3"
            background_color: .1,.2,.3,1
            pos_hint:{'center_x': .5, 'center_y': .5}

        Button:
            text:"RelativeBtn4"
            background_color: .1,.2,.3,1
            pos_hint:{'x': 0, 'y': 0}

        Button:
            text:"RelativeBtn5"
            background_color: .1,.2,.3,1
            pos_hint:{'right': 1, 'y': 0}

ScatterLayout 分散布局

ScatterLayout布局与RelativeLayout布局相似，当变更位置的时候，布局内的小部件也会随着父布局一起相对更改，因为这个布局主要由Scatter小部件实现，所以是可以实现自由的平移，旋转，缩放等布局的。
我们来看下， 使用Python是如何实现的。

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

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.uix.scatterlayout import ScatterLayout
from kivy.uix.image import AsyncImage
from kivy.graphics import Rectangle, Color


class ScatterLayoutWidget(ScatterLayout):
    pass


class BoxLayoutWidget(BoxLayout):
    def __init__(self, **kwargs):
        super(BoxLayoutWidget, self).__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)

        scatter_layout = ScatterLayoutWidget()

        image = AsyncImage(source='https://blogcdn.sea-whales.cn/blog/typecho/11.jpg')

        scatter_layout.add_widget(image)

        self.add_widget(scatter_layout)

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


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


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

运行以上python代码，将会出现一个图片，且在窗体中间加载，我们可以使用鼠标单击图片，模拟手指点击进行图片的拖动和缩放、旋转操作。

kv配合python实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# !/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 ScatterLayoutApp(App):
    def build(self):
        return BoxLayoutWidget()


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

kv文件

<BoxLayoutWidget>
    canvas:
        Color:
            rgba: 1,1,1,1

    ScatterLayout:
        AsyncImage:
            source: 'https://blogcdn.sea-whales.cn/blog/typecho/11.jpg'

    ScatterLayout:
        Image:
            source: 'scatter_image.jpg'

StackLayout 堆栈布局

堆栈布局中只要不超过布局的范围，就可以进行垂直或者水平的排列子项，并且各个小部件的大小可以不需要相同，StackLayout布局可以通过orientation属性进行指定布局方向，默认值为lr-tb。
我们看看堆栈排列有哪些排序排列。

• 按行排列：lr-tb,lr-bt,rl-tb,rl-bt
• 按列排序：tb-lr,bt-lr,tb-rl,bt-rl

我们看看上面的l、r、t、b 分别代表什么。

• l 代表的是’left’的缩写，代表左
• r 代表的是’right’的缩写，代表右
• t 代表的是’top’的缩写，代表上
• b 代表的是’bottom’的缩写，代表下

那么我们就可以将’lr’理解为从左到右，’tb’理解为从上到下，以此类推。
‘lr-tb’可以看成先按行从左到右，当前窗口行满后再按列从上到下，那么’tb-lr’则可以看成先按列从上到下，当前窗口列满后，按从左到右排列。其他方式，以此类推。

接下来我们来写一个’lr-tb’排列，不同大小的布局，且按照’lr-tb’方式布局长度递增。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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


from kivy.uix.button import Button
from kivy.uix.stacklayout import StackLayout
from kivy.app import App
from kivy.graphics import Rectangle, Color


class StackLayoutWidget(StackLayout):
    def __init__(self, **kwargs):
        self.orientation = 'lr-tb'

        super(StackLayoutWidget, self).__init__(**kwargs)

        with self.canvas:
            Color(1, 1, 1, 1)  # 设置底色为白色

            self.rect = Rectangle(size=self.size, pos=self.pos)
            self.bind(size=self.update_rect, pos=self.update_rect)

        for i in range(30):
            # 将按钮的高度控制在20%，长度初始为50，随着按钮越多按钮越大递增。
            btn = Button(text=f'Btn_f{i}', width=50 + i * 8, size_hint=(None, 0.20))  
            self.add_widget(btn)

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


class StackLayoutApp(App):
    def build(self):
        return StackLayoutWidget()


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

前面已经写了很多从Python 文件改为Python和kv文件配合的情况了，这个我就不单独写了。
我们来看看StackLayout有哪些属性。

• orientation: 前面我们说过，这个属性是用于决定布局内子部件的排列方式，也说明了具体有哪些属性。
• padding：这个属性有看前面的也不陌生，是用于控制布局和部件之间的间距的参数。接受的是一个list,可以是四个和两个和一个。四个时分别是[padding_left, padding_top, padding_right, padding_bottom] 左、上、右、下 。两个时分别是[padding_horizontal,padding_vertical] 水平、垂直 两个方向。一个时代表控件四个方向的间距。他们的默认值都为0
• spacing: 这属性和前面的属性也是一样的用于控制部件和部件之间间距。他可以接受两个和一个参数，也是list。不同数量参数和padding表示的一致。

以上三个参数StackLayout常用的属性，还有几个就是布局会根据子部件自动设置一些属性。我们来看下分别是哪些（顾名思义即可）：

• minimum_height：最低高度。
• minimum_width: 最小宽度
• minimum_size：最小尺寸（可同时设置最低高度和最小宽度）

以上就是StackLayout参见的属性，就不做例子进行解释了。如果是按照前面一步步看过来的，也能很快理解意思。

例子：计时器

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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


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


class ClockApp(App):
    def build(self):
        return ClockBoxLayout()


if __name__ == '__main__':
    # 设置页面背景
    from kivy.core.window import Window

    Window.clearcolor = [.8, .8, .8, 1]
    ClockApp().run()

kv文件

<ClockBoxLayout>:
    orientation: 'vertical'

    Label:
        id: time_label_id
        text: '[b]00[/b]:00:00'
        font_size: 60
        markup: True

计时器

具有暂停和重置功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

from time import strftime
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.clock import Clock


class ClockBoxLayout(AnchorLayout):
    def __init__(self, **kwargs):
        super(ClockBoxLayout, self).__init__(**kwargs)
        self.timing_flag = False
        self.timing_seconds = 0
        self.on_start()

    def on_start(self):
        # 设置clock 每0秒执行一次，代表实时进行不间断刷新。
        Clock.schedule_interval(self.update_time, 0)

    def update_time(self, nap):
        if self.timing_flag:
            self.timing_seconds += nap
        # 通过ID获取time_label_id的控件，并且设置text的属性值
        self.ids.time_label_id.text = strftime('[b]%H[/b]:%M:%S')
        m, s = divmod(self.timing_seconds, 60)
        self.ids.stopwatch.text = ('%02d:%02d.[size=40]%02d[/size]' % (int(m), int(s), int(s * 100 % 100)))

    def start_on_stop(self):
        self.ids.start_stop_button_id.text = 'Start' if self.timing_flag else 'Stop'
        self.timing_flag = not self.timing_flag

    def reset_clock(self):
        if self.timing_flag:
            self.ids.start_stop_button_id.text = 'Start'
            self.timing_flag=False
        self.timing_seconds = 0


class ClockApp(App):
    def build(self):
        return ClockBoxLayout()


if __name__ == '__main__':
    # 设置页面背景
    from kivy.core.window import Window

    Window.clearcolor = [.8, .8, .8, 1]
    ClockApp().run()

kv文件

<MyButton@Button>
    font_size: 25
    bold: True
    border: (2,2,2,2)

<ClockBoxLayout>:
    # 异步加载背景图像 
    AsyncImage:
        source: 'https://blogcdn.sea-whales.cn/blog/typecho/11.jpg'

    BoxLayout:
        # 设置布局
        orientation: 'vertical'

        Label:
            id: time_label_id   # 添加ID属性，通过ID属性进行对控件的获取
            text: '[b]00[/b]:00:00'
            font_size: 60
            markup: True   # 

        BoxLayout:
            orientation: 'horizontal'
            padding: 20
            spacing: 20
            size_hint:(1, None)
            height: 90

            MyButton:
                id: start_stop_button_id 
                text:'start'
                on_press: root.start_on_stop()

            MyButton:
                text: 'Reset'
                on_press: root.reset_clock()  # 触发事件

        Label:
            id: stopwatch
            text: '00:00.[size=40]00[/size]'
            font_size: 60
            markup: True

图形绘制

页面背景

看过布局的朋友们，一定发现了，在创建一个widget控件后，为布局设置背景色或者经常会有一个with self.canvas并且加了几个属性和绑定了事件，这些其实是我们在生成一个控件后，Kivy自动生成的一个类似画布的。我们通过对画布的更改可以设置颜色、尺寸、背景图等。
这里说明一下，canvas 学过HTML5的同学肯定觉得眼熟，但是实际两个是不相同的。
HTML的Canvas的定义是：

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

而Kivy的Canvas本质是一组在坐标空间的指令容器，可以理解成坐标空间中一个无限的绘画板，通过添加指令来绘制图形。
我们先来使用纯色进行设置背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.graphics import Rectangle, Color


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

        with self.canvas:
            Color(1, 1, 1, 1)
            Rectangle(pos=self.pos, size=self.size)


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


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

运行上面代码可以发现，在布局中，左下角有一块100*100的白色小方块,这时候我们就完成了基础的颜色设置，但是我们需要把白色填满整个方块。其实以上代码的操作是初始化一个BoxLayou然后，初始化后其实一个黑色的背景，然后在with里面新加一个画布，对画布初始化为白色背景。如果我们要填满整个窗口只需要在初始化好画布之后，对画布进行大小重定义即可实现覆盖。参考如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.graphics import Rectangle, Color


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

        with self.canvas:
            # 设置颜色值，通常百分比形式比较难把握，我们可以选择将rgb的色值除255，
            # 例如：海蓝宝石（#7FFFD4）色的rgb的色值是（127，255，212）写成Kivy的Color就写成
            # Color(127/255,255/255,212/255,0)，最后一个值是设置透明度的一般选择0~1之间的值。
            # 0不透明，1为透明
            Color(127 / 255, 255 / 255, 212 / 255, 1)
            self.rect = Rectangle(pos=self.pos, size=self.size)
            self.bind(pos=self.update_rect, size=self.update_rect)

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


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


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

老样子，我们看看KV文件配合的情况下如何实现以上样子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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


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


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


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

kv文件

1
2
3
4
5
6
7
8

<BoxLayoutWidget>
    canvas:
        Color:
            rgba: [127 / 255, 255 / 255, 212 / 255, 1]

        Rectangle:
            size: self.size
            pos: self.pos

还可以在有底色的情况下，使用背景图片。
只需把前面Python代码中19行新增一个参数即可如下：

self.rect = Rectangle(pos=self.pos, size=self.size, source='canvas_image.jpg')

或者kv文件中Rectangle下新增source: 'canvas_image.jpg'，其中canvas_image.jpg是图片名称和地址。

基本图形绘制

前面，我们使用纯色背景以及使用图片来将Canvas这个画布进行上色和调整等，接下来我们试试在画好的画布中进行简单图形的绘制，比如。矩形、椭圆等

矩形

其实我们前面也一直在画这个矩形，只是有的部分把他填充了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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


from kivy.uix.relativelayout import RelativeLayout
from kivy.app import App


class RelativeWidget(RelativeLayout):
    def __init__(self, **kwargs):
        super(RelativeWidget, self).__init__(**kwargs)


class DrawRectangleApp(App):
    def build(self):
        return RelativeWidget()


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

drawrectangle.kv

<RelativeWidget>
    canvas:
        Color:
            rgba: [1,1,1,1]
        Rectangle:
            size: self.width*0.2, self.height*.15
            pos: self.x+10, self.y+10

椭圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

from kivy.uix.relativelayout import RelativeLayout
from kivy.app import App


class RelativeWidget(RelativeLayout):
    def __init__(self, **kwargs):
        super(RelativeWidget, self).__init__(**kwargs)


class DrawEllipseApp(App):
    def build(self):
        return RelativeWidget()


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

drawellipse.kv

<RelativeWidget>
    canvas:
        Color:
            rgba: [1,1,1,1]
        Ellipse:
            size: self.width*.35, self.height*.35
            pos: self.x+250, self.top-400

半圆及多边形

其实半圆的画法和椭圆基本一致。只是增加了三个新属性。

• angle_start: 开始线角度，开始方向与y轴的角度。
• angle_end: 结束线角度，结束方向与y轴的角度。一般angle_end的大小要大于angle_start,若不大于则需要加 360° ，此时Kivy会顺时针画图形。否则则是逆时针画图形。
• egments: 多边形的边数，可以用来画三角形，六边形等形状。

例如,我们改下前面的椭圆，在它旁边加多一个六边形，一个三角形以及一个扇形还有正圆。Python代码我们继续使用椭圆的代码。改下Kv代码就好：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<RelativeWidget>
    canvas:
        Color:
            rgba: [1,1,1,1]
        Ellipse:  # 正圆
            size: self.width*0.20, self.width*0.20
            pos: self.x+20, self.top-200

        Ellipse:  # 正六边形
            size: self.height*0.25, self.height*0.25
            pos: self.x+200, self.top-200
            segments: 6

        Ellipse:  # 超过180°的顺时针扇形
            size: self.width*0.25, self.height*.25
            pos: self.x+400, self.top-200
            angle_start: 120
            angle_end: 420

        Ellipse:  # 正三角
            size: self.height*.25, self.height*.25
            pos: self.x+400, self.top-400
            segments: 3

        Ellipse:  # 正半圆
            size: self.height*0.25, self.height*.25
            pos: self.x+200, self.top-400
            angle_start: 0
            angle_end: 180

        Ellipse:  # 椭圆
            size: self.height*0.30, self.width*.15
            pos: self.x+20, self.top-400

多边形

前面使用了画圆的方式使用参数segments来画多边形，这些多变形画出来它的边长是随着圆的尺寸决定的，长度是不能自己决定的。
Kivy还提供了一种方式，用于指定各边的顶点坐标，可以绘制特殊边的多边形，但是值支持四个坐标点，可用于菱形、平行四边形、梯形等。

一样，我们值更改Kv文件如下：

<RelativeWidget>
    canvas:
        Color:
            rgba: [1,1,1,1]

        Quad:
            points: 400,250, 640,280, 480,500, 380,520  # 设置顶点坐标。 按X轴，Y轴的顺序读取顶点坐标。

Quad中的points会按照x轴,y轴的的顺序，读取点的位置，并且在画布canvas上绘制一个多边形。

点和线

kv文件

<RelativeWidget>
    canvas:
        Color:
            rgba: [1,1,1,1]

        Line:
            points: 310,350, 310,280,  360,350, 510,350

        Point:
            points:300,200, 300,400
            pointsize: 5

其实就像数学里面理解的，所有的线是由无数个点挨着排列形成的，同理面是由线挨着排列形成的。我们也可以用点和线画前面的图形。
例如:

<RelativeWidget>
    canvas:
        Color:
            rgba: [1,1,1,1]

        Line:  # 线
            points: 110,150, 310,80

        Point: # 点
            points:100,200, 180,260
            pointsize: 5  # 点大小

        Line: # 椭圆
            ellipse: 210,320, 80,60, 120,420,180
            width: 2  # 线宽

        Line: # 圆
            circle: 350,350, 40,0, 360,180
            width: 1.5 

        Line: # 矩形
            rectangle: 410,310, 80, 70

        Line:
            points: 510,310, 540,390, 590,320
            close: True  # 是否闭合

KV中Line对应参数说明：

• ellipse：210， 320 表示椭圆的位置；80， 60 代表椭圆的宽和长；120， 420，180分别对应： angel_start, angel_end, segments.
• circle: 350，350 表示圆心的位置；40表示圆的半径；0，360，180分别对应： angel_start, angel_end, segments.
• rectangle: 420, 310 表示矩形位置左下角的顶点； 80，70，代表宽高
• points： 510， 310 代表第一个点的位置，以此类推。

Cancas 属性

前面我们已经初步了解了Canvas画布基本绘制功能。我们来深入了解下他有哪些属性。
在Kivy里，每个小部件和布局基本都有他的Canvas、Canvas.before和canvas.after,其实我们可以将canvas看作在坐标空间种，一个无限的绘图板，通过添加绘图指令来绘制想要的图形。Kivy的所有部件都是共享一个坐标空间的，且不限于窗口或者屏幕的大小。
我们前面学习的时候也已经试过给画布和小部件设置背景以及显示的颜色。而且我们还能添加不同Instructions指令来达到不同的页面效果。

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

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import Rectangle, Color
from kivy.graphics.instructions import InstructionGroup


class RelativeWidget(RelativeLayout):
    def __init__(self, **kwargs):
        super(RelativeWidget, self).__init__(**kwargs)
        blue = InstructionGroup()
        blue.add(Color(1, 0, 0, .6))
        blue.add(Rectangle(pos=self.pos, size=(300,300)))
        self.canvas.add(blue)

        green = InstructionGroup()
        green.add(Color(0, 1, 0, 0.4))
        green.add(Rectangle(pos=(300, 300), size=(300, 300)))
        self.canvas.add(green)


class AttributeApp(App):
    def build(self):
        return RelativeWidget()


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

通常情况，我们在使用完canvas画布后，还需使用clear（）方法清除所有加载在画布种的Instructions指示类型。
我们可以把上面的代码改成with语法,效果是一致的。

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

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import Rectangle, Color
from kivy.graphics.instructions import InstructionGroup


class RelativeWidgetWith(RelativeLayout):
    def __init__(self, **kwargs):
        super(RelativeWidgetWith, self).__init__(**kwargs)
        with self.canvas:
            Color(1, 0, 0, .6)
            Rectangle(pos=self.pos, size=(300, 300))

            Color(0, 1, 0, 0.4)
            Rectangle(pos=(300, 300), size=(300, 300))


class AttributeApp(App):
    def build(self):
        return RelativeWidgetWith()


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

还有一些常用的属性：

在Kivy每个小部件都有属性canvas，除了这个包括有canvas.before和canvas.after属性，用法的话基本和canvas一致。只是在运行顺序上的优先级不同。
大概顺序是：

• canvas.before > canvas > widget(canvas.befor,canvas,canvas.after) > canvas.after

旋转、平移和缩放空间坐标

在canvas 中是可以使用Rotate指令来控制旋转操作，他与ScatterLayout布局不同，它是对整个坐标空间，因此所有的子部件都是会受到影响。在使用整个参数时，需要指定三个参数;

• axis: 设置用于旋转的轴，通常为z轴（0，0，1）
• angle： 设置旋转度数
• origin： 设置旋转参考点

来试试效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# !/usr/bin/env python3
# -*- coding: utf-8 -*-
# 选择平移缩放


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


class RotateGridLayoutWidget(GridLayout):
    def __init__(self, **kwargs):
        super(RotateGridLayoutWidget, self).__init__(**kwargs)


class RotateTranslateZoomApp(App):
    def build(self):
        return RotateGridLayoutWidget()


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

rotatetranslatezoom.kv

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<MyImage@Image>
    source:'rotatetranslatezoom.jpg'
    pos: self.parent.pos
    size_hit: .5, .4
    canvas:
        Color:
            rgba: 1,0,0,.5
        Line:
            rectangle: self.x, self.y, self.width,self.height

<RotateGridLayoutWidget>
    cols: 2
    canvas:

        Color:
            rgba:(1,1,1,1)
        Rectangle:
            pos: self.pos
            size: self.size

    Button:
        text: 'col:1 row:1'

    FloatLayout:
        canvas:
            Rotate:
                axis:(0,0,1)
                angle: 60
                origin: self.center
            Color:
                rgba:(1,1,1,1)
            Rectangle:
                pos: self.pos
                size: self.size
        MyImage:

    Button:
        text: 'col:1 row:2'

以上布局，会出现两个按钮和一张图片。其中按钮按列排列。但是由于我们在FloatLayout中使用了Rotate这样导致了画布进行了旋转。我们看到的效果是图像是沿着中点，逆时针旋转了60度的情况。并且由于旋转的是在Button前面加入的，所以导致后方的空间坐标系也收到了影响，也连带着旋转了。而且点击第二个按钮黑色部分发现无效。而是需要点击按钮本身的位置，也就是第一个按钮的垂直排列的列下方才有效。为了避免这个情况，我们需要引入两个新的命令。

• PushMatrix ： 保存上下文环境。
• PopMatrix ： 恢复上下文环境。
  就像上面的栗子：
  我们在对某个图像的画布或者其他进行操作的时候。就会导致代码排序在它之后的内容受到影响。这个时候我们就可以使用前面两个命令对环境进行保存和回复。
  我们来改下KV文件：

<MyImage@Image>
    source:'rotatetranslatezoom.jpg'
    pos: self.parent.pos
    size_hit: .5, .4
    canvas:
        PushMatrix
        Rotate:
            axis:(0,0,1)
            angle: 60
            origin: self.center
        Color:
            rgba: 1,0,0,.5
        Line:
            rectangle: self.x, self.y, self.width,self.height
        PopMatrix

<RotateGridLayoutWidget>
    cols: 2
    canvas:

        Color:
            rgba:(1,1,1,1)
        Rectangle:
            pos: self.pos
            size: self.size

    Button:
        text: 'col:1 row:1'

    FloatLayout:
        MyImage:


    Button:
        text: 'col:1 row:2'

以上文件运行后，会发现，红色矩形框旋转了60度。后面的按钮以及图像均不会受到影响，这是因为Rotate指令我们是放在canvas中的，是在屏幕上以及确定位置之后才开始执行的,并且在显示的时候，就使用前面的恢复环境命令恢复了。但是我们旋转的时候，就是为了让图像旋转。现在的情况却是图像并未旋转，这个时候，可以来试试前面我们学过的属性canvas.befor和canvas.after我们只需要在位置还没确定的时候，就旋转，这样图像就会在画布旋转之后进行图像的显示。这样就能达到指定效果了。我们在改动下KV文件:

<MyImage@Image>
    source:'rotatetranslatezoom.jpg'
    pos: self.parent.pos
    size_hit: .5, .4
    canvas.before:  # 使用canvas.before 命令
        PushMatrix  # 保存当前上下文环境
        Rotate:
            axis:(0,0,1)  # 旋转
            angle: 60     # 角度
            origin: self.center  # 起点
    canvas:
        Color:
            rgba: 1,0,0,.5
        Line:
            rectangle: self.x, self.y, self.width,self.height

    canvas.after:
        PopMatrix  # 恢复上下文环境

<RotateGridLayoutWidget>
    cols: 2
    canvas:

        Color:
            rgba:(1,1,1,1)
        Rectangle:
            pos: self.pos
            size: self.size

    Button:
        text: 'col:1 row:1'

    FloatLayout:
        MyImage:


    Button:
        text: 'col:1 row:2'

使用上面的kv文件，就会发现图像和矩形框都一起旋转了。这样就达到了，旋转的同时连小部件也旋转。当然会发现我们为什么不把PopMatrix写在canvas的末行，而是大费周章的写个canvas.after，这里我就不解释了结合前面的知识点，大家可以尝试下，将PopMatrix写在canvas末行，看看是什么效果。

试过了旋转，我们来看看平移：
canvas平移指令是Translate除了属性以外，该指令和我们前面用的Rotate指令基本是一致。
在使用Translate时，是需要指定X轴，Y轴，Z轴上的移动距离，如果不指定，则默认不移动。我们再拿前面的旋转代码给他加上平移属性看看。

Translate:
    x: -50
    y: 100
    z:0

就不贴完整代码了，大概就是在Rotate属性结束下方另起一行，加上以上四行代码。我们会发现，图片的位置会向左平移了50个像素，将按钮盖住了，并且也向上移动了100个像素。如果这里我们将z轴的值进行改变，会发现图像不见了，这是因为图像的位置已经不在画布上了。
同理缩放（Scale）也是和前面一致，我们只需要指定xyz轴上的缩放倍数即可:

Scale:
    xyz:(1.25,1.30,0.5)

如上，则是x轴和y轴分别缩放1.25和1.30.倍，z轴缩放0.5倍。

实战–画板

我们先来做一个初始画板，先不添加其他复杂元素，来实现能写字的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Line, Color


class DrawCanvasWidget(Widget):
    def __init__(self, **kwargs):
        super(DrawCanvasWidget, self).__init__(**kwargs)
        """设置画笔的默认颜色为黑色"""
        self.canvas.add(Color(rgb=[0, 0, 0]))
        self.line_width = 2

    def on_touch_down(self, touch):
        """触摸显示轨迹"""
        if Widget.on_touch_down(self, touch):
            return
        with self.canvas:
            touch.ud['current_line'] = Line(points=(touch.x, touch.y), width=self.line_width)

    def on_touch_move(self, touch):
        """连线"""
        if 'current_line' in touch.ud:
            touch.ud['current_line'].points += (touch.x, touch.y)


class PaintApp(App):
    def build(self):
        self.draw_canvas_widget = DrawCanvasWidget()
        return self.draw_canvas_widget


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

Kivy提供了on_touch_down和on_touch_move方法来实现监听屏幕点击和屏幕移动触发事件

1
2
3
4
5
6
7

<DrawCanvasWidget>:
    canvas.before:
        Color:
            rgba:[1,1,1,1]
        Rectangle:
            pos: self.pos
            size: self.size

以上能够实现使用一种黑色画笔在白色画板上进行写字。接下来，我们试试能否通过选择颜色去替换画笔颜色，然后进行绘画。
Kivy种设置颜色的方法一般是使用rgba（r红色，g绿色，b蓝色，alpha名度）一般我们就是使用颜色和255进行比值，得到百分比。我们也可以直接使用十六进制进行表示。当需要大量颜色的时候，Kivy在utils包内也提供了 get_color_from_hex()方法进行16进制和百分比转换，我们使用当时时候传入十六进制字符串即可。
我们可以选择在python内使用，还是在kv文件内使用，使用方法如下：
python文件内：

from kivy.utils import get_color_from_hex
get_color_from_hex('#98feab')

kv文件内使用:

#:import C kivy.utils.get_color_from_hex
Button:
    background_color: C('#98feab')

我们可以在画板类里面写上一个方法来改变canvas画布颜色的方法。不是canvas.before背景：

def chang_color(self, new_color):
    """调色"""
    self.canvas.add(Color(*new_color))

通过chang_color方法在init中初始化一个颜色。在kv文件设置按钮，通过按钮单击调用chang_color激活颜色的改变。
具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Line, Color
from kivy.utils import get_color_from_hex


class DrawCanvasWidget(Widget):
    def __init__(self, **kwargs):
        super(DrawCanvasWidget, self).__init__(**kwargs)
        """设置画笔的默认颜色为黑色"""
        self.change_color(get_color_from_hex('#12aced'))
        self.line_width = 2

    def on_touch_down(self, touch):
        """触摸显示轨迹"""
        if Widget.on_touch_down(self, touch):
            return
        with self.canvas:
            touch.ud['current_line'] = Line(points=(touch.x, touch.y), width=self.line_width)

    def on_touch_move(self, touch):
        """连线"""
        if 'current_line' in touch.ud:
            touch.ud['current_line'].points += (touch.x, touch.y)

    def change_color(self, new_color):
        """调色"""
        self.canvas.add(Color(*new_color))


class PaintApp(App):
    def build(self):
        self.draw_canvas_widget = DrawCanvasWidget()
        return self.draw_canvas_widget


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

kv文件

#:import C kivy.utils.get_color_from_hex   # 引入颜色转换方法

<BottomColorButton@ToggleButton>:
    group: 'color'
    background_normal: ''
    background_down: ''
    border: (3, 3, 3, 3)
    on_release: app.draw_canvas_widget.change_color(self.background_color)


<DrawCanvasWidget>:
    canvas.before:
        Color:
            rgba: [1, 1, 1, 1]
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        id: bottom_box
        orientation: 'horizontal'
        padding: 2
        spacing: 2
        size: root.width, 40

        BottomColorButton:
            background_color: C('#19caad')
            state: 'down'                     # 按钮状态

        BottomColorButton:
            background_color: C('#8cc7b5')

        BottomColorButton:
            background_color: C('#a0eee1')

        BottomColorButton:
            background_color: C('#bee7e9')

        BottomColorButton:
            background_color: C('#beedc7')

        BottomColorButton:
            background_color: C('#d6d5b7')

        BottomColorButton:
            background_color: C('#d1ba74')

        BottomColorButton:
            background_color: C('#e6ceac')

        BottomColorButton:
            background_color: C('#ecad9e')

        BottomColorButton:
            background_color: C('#f4606c')

        BottomColorButton:
            background_color: C('#3498db')

        BottomColorButton:
            background_color: C('#1abc9c')

        BottomColorButton:
            background_color: C('#2ecc71')

        BottomColorButton:
            background_color: C('#f1c40f')

        BottomColorButton:
            background_color: C('#e67e22')

        BottomColorButton:
            background_color: C('#e74c3c')

        BottomColorButton:
            background_color: C('#9b59bc')

        BottomColorButton:
            background_color: C('#ecf0f1')

        BottomColorButton:
            background_color: C('#95a5a6')

        BottomColorButton:
            background_color: C('#000000')

有了画笔颜色的改变，我们接下来看看改变画笔的粗细。
同理，使用与改变颜色相同方法做一个画笔粗细：

    def change_line_width(self, line_width='Normal'):
        self.line_width = {'Thin': 1, 'Normal': 2, 'Thick': 4}[line_width]

1
2
3
4
5
6
7
8
9

<LineWidthButton@ToggleButton>:
    group: 'line_width'
    color: C('#2c3e50')
    background_color: C('#ecf0f1')
    background_normal: ''
    background_down: ''
    border: (3, 3, 3, 3)
    on_release: app.draw_canvas_widget.change_line_width(self.text)

画布内新增改变按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

BoxLayout:
    orientation: 'horizontal'
    padding: 2
    spacing: 2
    x: 0
    top: root.top
    size_hint: None,None
    size: 280, 44

    LineWidthButton:
        text: 'Thin'

    LineWidthButton:
        text: 'Normal'
        state: 'down'

    LineWidthButton:
        text: 'Thick'

新增清空画板功能;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

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

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Line, Color
from kivy.utils import get_color_from_hex
# 添加边框样式
from kivy.uix.behaviors import ToggleButtonBehavior
from kivy.uix.togglebutton import ToggleButton


# 因为已经在这边添加了ToggleButton的公共类，提取出公共属性的两个就不需要使用ToggleButton而是可以直接使用
# FrameToggleButton即可
class FrameToggleButton(ToggleButton):
    """当前按钮添加边框"""

    def do_press(self):
        """点击改变状态"""
        if self.state == 'normal':
            ToggleButtonBehavior.do_press(self)


class DrawCanvasWidget(Widget):
    def __init__(self, **kwargs):
        super(DrawCanvasWidget, self).__init__(**kwargs)
        """设置画笔的默认颜色为黑色"""
        self.change_color(get_color_from_hex('#12aced'))
        self.change_line_width()

    def on_touch_down(self, touch):
        """触摸显示轨迹"""
        if Widget.on_touch_down(self, touch):
            return
        with self.canvas:
            touch.ud['current_line'] = Line(points=(touch.x, touch.y), width=self.line_width)

    def on_touch_move(self, touch):
        """连线"""
        if 'current_line' in touch.ud:
            touch.ud['current_line'].points += (touch.x, touch.y)

    def change_color(self, new_color):
        """调色"""
        self.last_color = new_color
        self.canvas.add(Color(*new_color))

    def change_line_width(self, line_width='Normal'):
        self.line_width = {'Thin': 1, 'Normal': 2, 'Thick': 4}[line_width]

    def clear_canvas(self):
        saved = self.children[:]
        self.clear_widgets()
        self.canvas.clear()
        for widget in saved:
            self.add_widget(widget)
        self.change_color(self.last_color)


class PaintApp(App):
    def build(self):
        self.draw_canvas_widget = DrawCanvasWidget()
        return self.draw_canvas_widget


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

#:import C kivy.utils.get_color_from_hex

<BottomColorButton@FrameToggleButton>:
    group: 'color'
    background_normal: ''
    background_down: ''
    border: (1, 1, 1, 1)
    on_release: app.draw_canvas_widget.change_color(self.background_color)

<LineWidthButton@FrameToggleButton>:
    group: 'line_width'
    color: C('#2c3e50')
    background_color: C('#ecf0f1')
    background_normal: ''
    background_down: ''
    border: (3, 3, 3, 3)
    on_release: app.draw_canvas_widget.change_line_width(self.text)


<DrawCanvasWidget>:
    canvas.before:
        Color:
            rgba: [1, 1, 1, 1]
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        orientation: 'horizontal'
        padding: 2
        spacing: 2
        x: 0
        top: root.top
        size_hint: None,None
        size: 280, 44

        LineWidthButton:
            text: 'Thin'

        LineWidthButton:
            text: 'Normal'
            state: 'down'

        LineWidthButton:
            text: 'Thick'

        Button:
            text: 'Clear'
            on_release: root.clear_canvas()


    BoxLayout:
        id: bottom_box
        orientation: 'horizontal'
        padding: 2
        spacing: 2
        size: root.width, 40

        BottomColorButton:
            background_color: C('#19caad')
            state: 'down'

        BottomColorButton:
            background_color: C('#8cc7b5')

        BottomColorButton:
            background_color: C('#a0eee1')

        BottomColorButton:
            background_color: C('#bee7e9')

        BottomColorButton:
            background_color: C('#beedc7')

        BottomColorButton:
            background_color: C('#d6d5b7')

        BottomColorButton:
            background_color: C('#d1ba74')

        BottomColorButton:
            background_color: C('#e6ceac')

        BottomColorButton:
            background_color: C('#ecad9e')

        BottomColorButton:
            background_color: C('#f4606c')

        BottomColorButton:
            background_color: C('#3498db')

        BottomColorButton:
            background_color: C('#1abc9c')

        BottomColorButton:
            background_color: C('#2ecc71')

        BottomColorButton:
            background_color: C('#f1c40f')

        BottomColorButton:
            background_color: C('#e67e22')

        BottomColorButton:
            background_color: C('#e74c3c')

        BottomColorButton:
            background_color: C('#9b59bc')

        BottomColorButton:
            background_color: C('#ecf0f1')

        BottomColorButton:
            background_color: C('#95a5a6')

        BottomColorButton:
            background_color: C('#000000')

部分UX部件

前面我们已经对Layout布局，以及Canvas 画布进行了学习，我们接下来来看看，经常使用的一些部件，这些部件是图形界面设计的重要组成部分，合理使用可以更高效的开发程序。我们先从简单部件开始。

Button

button常用属性

触发事件

• on_press：按下按钮触发该事件
• on_release: 按下按钮并释放时，触发该事件

Label标签

Kivy中的Label小部件用于显示文本，目前只支持ASCII和Unicode编码字符（暂不支持中文），可以通过属性设置文本内容，字体，大小，颜色，对齐方式，换行以及标记文字等内容。

常用属性

开启以下需要将markup打开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#:import C kivy.utils.get_color_from_hex

<LabelBoxLayout>:
    orientation: 'vertical'
    Button:
        text: 'Button'
        on_press: root.on_press_btn()
        on_release: root.on_release_btn()

    Label:
        id: lable_btn
        text: 'The first step is one of awareness. It will be hard to make a change to positive thinking without being acutely intimate with the thoughts that run through your mind. Recently, I was amazed to discover deep buried emotions from negative thoughts that I had for fewer than 10 minutes. Without awareness, I would have carried the hurt and anger inside. Awareness helped me to bring them out to the open for me to deal with.'
        font_size: '20sp'
        color: C('#B0C4DE')
        italic: True
        text_size: cm(15), mm(200)
        halign: 'right'
        valign: 'middle'
        strikethrough: True
    Label:
        canvas.before:
            Color:
                rgba: C('#DCDCDC')
            Rectangle:
                pos: self.pos
                size: self.size
        text: 'There are moments in life when [i]you miss someone [color=#"4169E1"]so much that you just want[/color] to pick them from your[/i] dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.'
        color: C('#FF0000')
        font_size: '15sp'
        bold: True
        text_size: cm(10), mm(100)
        halign: 'center'
        valign: 'middle'
        underline: True
        line_height: 1.0
        markup: True

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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


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

    def on_press_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough

    def on_release_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough


class LabelBoxApp(App):
    def build(self):
        return LabelBoxLayout()


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

触发事件

Kivy中是使用ref 来标记触发事件的，点击ref包裹的文本，就可以触发“on_ref_press”事件。

设置Label 标签的触发事件

在使用ref之前，需要将markup设置为True

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

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.utils import get_color_from_hex


class LabelBoxLayout(BoxLayout):
    def __init__(self, **kwargs):
        super(LabelBoxLayout, self).__init__(**kwargs)
        strtext = 'Awareness [color=#00FF00][ref=label][i]helped me[/i][/ref][/color] to [b]bring[/b] [s]them out[/s] to the open for me to deal with.'
        label_ref = Label(font_size='25sp',text=strtext, markup=True,
                          color=get_color_from_hex('#F0F8FF'))
        label_ref.bind(on_ref_press=self.on_press_btn_label_ref)
        self.add_widget(label_ref)

    def on_press_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough

    def on_release_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough

    def on_press_btn_label_ref(self, *args):
        self.children[0].strikethrough = not self.children[0].strikethrough


class LabelBoxApp(App):
    def build(self):
        return LabelBoxLayout()


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

#:import C kivy.utils.get_color_from_hex

<LabelBoxLayout>:
    orientation: 'vertical'
    Button:
        text: 'Button'
        on_press: root.on_press_btn()
        on_release: root.on_release_btn()

    Label:
        id: lable_btn
        text: 'The [ref=lable]first step[/ref] is one of awareness. It will be hard to make a change to positive thinking without being acutely intimate with the thoughts that run through your mind. Recently, I was amazed to discover deep buried emotions from negative thoughts that I had for fewer than 10 minutes. Without awareness, I would have carried the hurt and anger inside. Awareness helped me to bring them out to the open for me to deal with.'
        font_size: '20sp'
        color: C('#B0C4DE')
        italic: True
        text_size: cm(15), mm(200)
        halign: 'right'
        valign: 'middle'
        on_ref_press:
            print('Click on_ref_press')
            root.on_release_btn()
        strikethrough: True
        markup: True
    Label:
        canvas.before:
            Color:
                rgba: C('#DCDCDC')
            Rectangle:
                pos: self.pos
                size: self.size
        text: 'There are moments in life when [i]you miss someone [color=#"4169E1"]so much that you just want[/color] to pick them from your[/i] dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.'
        color: C('#FF0000')
        font_size: '15sp'
        bold: True
        text_size: cm(10), mm(100)
        halign: 'center'
        valign: 'middle'
        underline: True
        line_height: 1.0
        markup: True

单位介绍

px、dp和sp，这三个单位的区别在于，它们的定义各不相同：

• px：指像素，是指基本原色素及其灰度的基本编码,是Pixel的缩写。像素是指基本原色素及其灰度的基本编码，由 Picture（图像）和 Element（元素）这两个单词的字母所组成的。当图片尺寸以像素为单位时，需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相转换。
  例如：大多数网页制作常用图片分辨率为72，即每英寸像素为72，1英寸等于2.54厘米。
• dp：安卓开发时的长度单位,Density-independent pixel，是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度。。
• sp：与缩放无关的抽象像素，是字体单位.scale-independent pixel，安卓开发用的字体大小单位。一般情况下可认为sp=dp。

Image图片

使用Image控件来显示图片，可以通过size和pos来设置属性和设置大小和位置，通过source属性来指定图片的相对路径，此外，如果图片大小过大的时候，为了防止卡顿，可以使用异步的方式加载，这我们前面在学习的时候，咱们有试过，使用异步加载图片。

我们先来看看Image有哪些属性。

属性

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

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


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


class ImageBoxApp(App):
    def build(self):
        return ImageBoxLayout()


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ImageBoxLayout>:
    canvas:
        Color:
            rgba:[1,1,1,1]
        Rectangle:
            size:self.width+20, self.height+20
            pos: self.x-10,self.y-10
            source:'UxParts.jpg'

    AsyncImage:
        source:'https://blogcdn.sea-whales.cn/blog/typecho/17.jpg'
        size_hint_y: None
        width: 300
        allow_stretch: True   # 自适应
    
    Image:
        source:'https://blogcdn.sea-whales.cn/blog/typecho/17.jpg'
        size_hint_y: None
        width: 300
        allow_stretch: True

TextInput 输入框

先来看看有哪些属性，在Kivy中，为了方便输入值的样式，Kivy 提供了大量的属性。接下来我们来看看有哪些：

Linux多线程下载