【Kivy】布局 PageLayout、RelativeLayout [学习分享]（四）

本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。定期会更新文章到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()

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配合

python
# !/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代码文件两种方式实现。

python
# !/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 的方式去实现上面的样子。

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

目录

PageLayout 布局

PageLayout布局基本属性

RelativeLayout布局