本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。 定期会更新文章到 blog.sea-whales.cn 我的个人网站中，有兴趣的小伙伴可以进来看看、

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

只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。 定期会更新文章到blog.sea-whales.cn 我的个人网站中，有兴趣的小伙伴可以进来看看

图形绘制

页面背景

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

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

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

本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。 定期会更新文章到www.sea-whales.cn我的个人网站中，有兴趣的小伙伴可以进来看看、

Kivy命名规则

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

python
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()

本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。 定期会更新文章到blog.sea-whales.cn我的个人网站中，有兴趣的小伙伴可以进来看看、

PageLayout 布局

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

python
# !/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()

本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。 定期会更新文章到blog.sea-whales.cn我的个人网站中，有兴趣的小伙伴可以进来看看、

布局

FloatLayout

py文件

python
# !/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文件