Kivy - 用户界面问题

Question

尝试创建一个带有两个屏幕的简单 Kivy GUI：一个标题屏幕和一个带有多个按钮的控制屏幕。主要问题是导航 GUI 并让构建器正常运行。我只是在运行时出现黑屏。

import kivy

kivy.require('1.10.0')

from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.stacklayout import StackLayout


class IntroScreen(Screen):
    pass


class ContScreen(Screen):
    pass


class ScreenManagement(ScreenManager):
    pass


backbone = Builder.load_file("main.kv")


class MasterApp(App):
    def build (self):
        return backbone


boApp = MasterApp()

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

带有主.kv

ScreenManagement:
    transition: FadeTransition

<IntroScreen>:
    name: "main"
    intro.kv

<ContScreen>:
    name: "cont"
    stacklayout.kv

和示例屏幕 (intro.kv)

<IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            text: 'WELCOME'
            font_size: 50
            pos_hint={'x':0, 'y':0}

        Image:
            source=('mylogo.png')
            pos_hint: {'x':0,'y':0}

        Button:
            text: 'Initialize'
            font_size: 35
            on_release: app.root.current = "cont"

仍在学习 Kivy，所以我知道我做错了什么。希望能帮助您解决这个问题。编辑：导航已解决

跟进：

<IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            text: 'WELCOME'
            font_size: 50
            pos_hint: {'x':0, 'y':0}

        Image:
            source: 'mylogo.png'
            pos_hint: {'x':0,'y':0}

        Button:
            text: 'Initialize'
            font_size: 35
            on_release: root.manager.current = "cont"

图像根本没有显示在屏幕上，只是完整的按钮。

Answer 1

解决方案 - 控制小部件的大小和位置

使用size_hint 和pos_hint 控制小部件的大小和位置。

intro.kv

<IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            size_hint: 1, 0.2
            text: 'WELCOME'
            font_size: 50
            pos_hint: {'top': 1}

        Image:
            source: 'kivy-logo.png'
            pos_hint: {'center_x': 0.5, 'center_y': 0.5}

        Button:
            size_hint: 1, 0.1
            text: 'Initialize'
            font_size: 35
            on_release: app.root.current = "cont"

stacklayout.kv

<ContScreen>:
    BoxLayout:
        orientation: 'vertical'

        Label:
            text: 'Cont Screen'

        Button:
            size_hint: 1, 0.1
            text: 'Main Screen'
            on_release: root.manager.current = 'main'

输出 - size_hint & pos_hint

解决方案 - 黑屏

main.kv

• 使用include <file>将kv文件添加到main.kv中

Kivy Land Directives » incude <file>

include <file>

语法：

#:include [force] <file>

包括一个外部 kivy 文件。这允许您拆分复杂的 小部件到他们自己的文件中。如果强制包含，文件将 先卸载再重新加载。

intro.kv

• 将pos_hint={'x':0, 'y':0} 替换为pos_hint: {'x':0, 'y':0}
• 将source=('mylogo.png') 替换为source: 'mylogo.png'
• 将app.root.current 替换为root.manager.current，因为默认情况下每个屏幕都有一个属性manager，它会为您提供所使用的ScreenManager 的实例。

片段

main.kv

#:kivy 1.11.0
#:include intro.kv
#:include stacklayout.kv
#:import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManagement:
    transition: FadeTransition()
    IntroScreen:
        name: 'main'
    ContScreen:
        name: 'cont'

intro.kv

<IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            text: 'WELCOME'
            font_size: 50
            pos_hint: {'x':0, 'y':0}

        Image:
            source: 'mylogo.png'
            pos_hint: {'x':0,'y':0}

        Button:
            text: 'Initialize'
            font_size: 35
            on_release: root.manager.current = "cont"

输出