Kivy 布局之PageLayout

布局就是定义如何排列小部件

PageLayout：滑页布局
https://kivy.org/doc/stable/api-kivy.uix.pagelayout.html

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

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

        # 创建部件
        btn1 = Button(text='Hello', background_color=[0, 0, 1, 1])
        btn2 = Button(text='World', background_color=[0, 1, 0, 1])
        btn3 = Button(text='Hi', background_color=[0, 1, 1, 1])
        btn4 = Button(text='Kivy', background_color=[1, 0, 0, 1])
        btn5 = Button(text='你好', background_color=[1, 0, 1, 1])
        btn6 = Button(text='中国', background_color=[1, 1, 0, 1])

        # 添加部件
        self.add_widget(btn1)
        self.add_widget(btn2)
        self.add_widget(btn3)
        self.add_widget(btn4)
        self.add_widget(btn5)
        self.add_widget(btn6)

class MyApp(App):
    def build(self):
        return ExamplePageLayout(anim_kwargs = {'d': 5, 't': 'in_quad'}, border = 100, swipe_threshold = .2)

    def on_stop(self):
        print('应用程序已关闭')

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

代码解释

Page Layout 就是实现手机上常见的滑动翻页效果

anim_kwargs = {'d': 5, 't': 'in_quad'}
其中：
'd'代表动画的持续时间，5 代表动画持续5秒
't'代表动画的插值类型，in_quad 表示动画先慢后快
该参数默认值是 {‘d’: .5, ‘t’: ‘in_quad’}
具体还有哪些插值类型，可以通过引用 <class 'kivy.animation.AnimationTransition'> 查看

border = 100
表示可以按住滑动页面的边框宽度，下图右侧绿色部分
该参数默认值是 50像素

swipe_threshold = .2
表示触发滑动的阈值，.2 表示按住滑动超过页面20%宽度，即可松开由其自动继续滑动到下一页
该参数的默认值是 .5

以上代码执行效果如下

PageLayout01.JPG

修改代码如下

我们还可以获取触摸屏幕 按下，移动，松开时的坐标信息

class ExamplePageLayout(PageLayout):

    ......

    # 触摸-按下
    def on_touch_down(self, touch):
        print('+ on_touch_down, the spos value is {}, the pos value is {}'.format(touch.spos, touch.pos))
        super().on_touch_down(touch)  # 保留默认的触摸事件处理

    # 触摸-移动
    def on_touch_move(self, touch):
        print('+ on_touch_move, the spos value is {}, the pos value is {}'.format(touch.spos, touch.pos))
        super().on_touch_move(touch)  # 保留默认的触摸事件处理

    # 触摸-松开
    def on_touch_up(self, touch):
        print('+ on_touch_up, the spos value is {}, the pos value is {}'.format(touch.spos, touch.pos))
        super().on_touch_up(touch)  # 保留默认的触摸事件处理

touch.spos 是相对位置，以x轴和y轴为基准，输出距离x，y轴的距离（0~1）
touch.pos 是绝对位置，以左上角为原点，输出 x，y 值

需要使用 super().on_touch_down(touch) 等来保留默认的触摸事件处理，否则会阻止页面的滑动

+ on_touch_down, the spos value is (0.918648310387985, 0.5008347245409015), the pos value is (734.0, 300.0)
+ on_touch_move, the spos value is (0.9173967459324155, 0.5008347245409015), the pos value is (733.0, 300.0)
+ on_touch_move, the spos value is (0.9173967459324155, 0.5008347245409015), the pos value is (733.0, 300.0)
+ on_touch_move, the spos value is (0.9161451814768461, 0.5008347245409015), the pos value is (732.0, 300.0)
+ on_touch_move, the spos value is (0.9161451814768461, 0.5008347245409015), the pos value is (732.0, 300.0)
+ on_touch_move, the spos value is (0.9136420525657072, 0.5008347245409015), the pos value is (730.0, 300.0)
+ on_touch_move, the spos value is (0.9136420525657072, 0.5008347245409015), the pos value is (730.0, 300.0)
+ on_touch_up, the spos value is (0.9136420525657072, 0.5008347245409015), the pos value is (730.0, 300.0)
+ on_touch_up, the spos value is (0.9136420525657072, 0.5008347245409015), the pos value is (730.0, 300.0)