kivy language简明布局

cooolr 于 2021-11-21 发布

组件布局

BoxLayout:
    # 上下布局
    orientation: 'vertical'

BoxLayout:
    # 左右布局
    orientation: 'horizontal'

组件间隔

BoxLayout:
    # 外部间隔 (左，上，下，右)
    padding: (50,0,0,50)
    # 内部间隔
    spacing: 10

组件对齐

绝对高度

BoxLayout:
    orientation: 'vertical'
    Label:
        size_hint_y: None
        height: '200dp'
    TextInput:
        size_hint_y: None
        height: '200dp'
    Button:
        size_hint_y: None
        height: '200dp'
    Label:

相对高度

BoxLayout:
    orientation: 'vertical'
    Label:
        size_hint: (1, 0.1)
    TextInput:
        size_hint: (1, 0.1)
    Button:
        size_hint: (1, 0.2)
    Label:

浮动对齐

BoxLayout:
    orientation: 'vertical'
    Label:
        pos_hint:{'center_x':0.5, 'center_y':0.5}

Label字体左对齐

BoxLayout:
    orientation: 'vertical'
    Label:
        halign:'left'
        valign:'top'
        # 或者手动设置 text_size:(1000, None)
        text_size:(self.width, None)

TextInput文本框内上下居中对齐

BoxLayout:
    orientation: 'vertical'
    TextInput:
        padding:(10,0.5*(self.height-self.line_height))

BoxLayout布局从上到下

BoxLayout:
    orientation: 'vertical'
    padding: (36,36,36,root.height)

背景颜色

全局背景图片

BoxLayout:
    canvas.before:
        Rectangle:
            pos: self.pos
            size: self.size
            source: "earth.png"

全局纯色背景

BoxLayout:
    canvas.before:
        Color:
            # r红 g绿 b 蓝 a透明度
            # 画图工具编辑颜色框可以看到RGB颜色数字，每个数字除以255得到最终数字
            rgba: 1,0,0,1
        Rectangle:
            pos: self.pos
            size: self.size

Python设置全局背景

from kivy.graphics import *

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

Button/TextInput背景图片

Button:
    background_normal: "button1.png"
    background_down: "button2.png"

Button/TextInput背景颜色

TextInput:
    # 先设置background_normal为空
    background_normal: ''
    background_color: 1,1,1,1    # 文本框颜色
    foreground_color: 0,0,0,1    # 字体颜色

文字颜色

Label:
    # r红 g绿 b 蓝 a透明度
    # 画图工具编辑颜色框可以看到RGB颜色数字，每个数字除以255得到最终数字
    color: 1,0.94,0,1

字体设置

Label:
    # 中文需指定中文字体
    font_name: "droid.ttf"
    # 字体大小
    font_size: "120px"
    # 字体加粗
    bold: True
    # 开启markup支持
    markup: True
    text: "[b]Hello[/b] [size=36]World[/size]"

Python设置全局字体

from kivy.core.text import LabelBase

LabelBase.register(name='Roboto',fn_regular='droid.ttf')

Python设置输入框浮动弹出

from kivy.core.window import WindowBase

WindowBase.softinput_mode='below_target'

滚动显示

Label滚动

BoxLayout:
    orientation: 'vertical'
    ScrollView:
        Label:
            text: 'hello world\n'*100
            text_size:(self.width,None)
            halign:'left'
            valign:'top'
            size_hint_y:None
            height:self.texture_size[1]

TextInput滚动

BoxLayout:
    orientation: 'vertical'
    ScrollView:
        id:scrollview
        TextInput:
            text:"hello world\n"*100
            size_hint_y:None
            height:max(self.minimum_height, scrollview.height)
            readonly:True             # 只读
            keyboard_mode: 'managed'  # 不弹出键盘
            allow_copy:False          # 禁止复制
            multiline:True            # 多行显示

组件滚动

BoxLayout:
    orientation: 'vertical'
    ScrollView:
        id:scrollview
        BoxLayout:
            size_hint_y:None
            height:max(self.minimum_height, scrollview.height)
            Label:
                text: "Hello World"
            Button:
                text: "Hello World"

KV Language引用

#: include home.kv
#: import BoxLayout kivy.uix.boxlayout

多页面切换

# main.py
from kivy.app import App
class MainApp(App):
    def build(self):
        self.root.ids.home.ids\
        .button.on_release = \
        self.go_menu
    def go_menu(self):
        self.root.ids.manager\
        .current = 'menu'
MainApp().run()

# main.kv
#: include home.kv
#: include menu.kv
BoxLayout:
    orientation: 'vertical'
    ScreenManager:
        id: manager
        HomeScreen:
            id: home
        MenuScreen:
            id: menu

# home.kv
<HomeScreen@Screen>:
    name: 'home'
    BoxLayout:
        orientation: 'vertical'
        Button:
            id: button
            text: "go to hello world"

# menu.kv
<MenuScreen@Screen>:
    name: 'menu'
    BoxLayout:
        orientation: 'vertical'
        Label:
            text: "Hello World"

Python移除组件

self.root.ids.boxlayout\
.remove_widget(self.root.ids.label2)

Python监听按键

from kivy.core.window import Window
from kivy.app import App

class MainApp(App):
    def __init__(self):
        Window.bind(on_keyboard = self.events_program)

    def events_program(self, instance, keyboard, keycode, text, modifiers):
        if keyboard in (1001, 27):
            print("Hello World")

窗口大小与位置

from kivy.core.window import Window
Window.size = (1068, 681)

# 窗口x
Window.left = 100
# 窗口y
Window.top = 70

layout bolder line

BoxLayout:
    orientation: "horizontal"
    canvas.before:
        Color:
           rgba: 0.2,0.2,0.2,1
        Line:
           width: 1
           rectangle: self.x,self.y,self.width,self.height