沮丧 - UI 问题

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 and 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>

Syntax:

#:include [force] <file>

Includes an external kivy file. This allows you to split complex widgets into their own files. If the include is forced, the file will first be unloaded and then reloaded again.

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"

输出