Kivy - Проблемы с пользовательским интерфейсом - PullRequest
Новая
       15

Kivy - Проблемы с пользовательским интерфейсом

0 голосов
/ 20 сентября 2018

Попытка создать простой графический интерфейс Kivy с двумя экранами: экраном заголовка и экраном управления с несколькими кнопками.Основная проблема - навигация по 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

и примером экрана (введение.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"

Все еще изучаю Киви, поэтому я знаю, что делаю что-то не так.Был бы признателен, чтобы выяснить это.РЕДАКТИРОВАТЬ: НАВИГАЦИЯ РЕШЕНА

СЛЕДУЙТЕ ЗА: 

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

Изображение вообще не отображается на экране, просто полная кнопка.

1 Ответ

0 голосов
/ 20 сентября 2018

Решение - Управление размером и позицией виджета

Используйте 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

Img01 Img02

Решение - черный экран

main.kv

  • Используйте include <file>, чтобы добавить файлы kv в main.kv

Kivy Land Directives »incude 

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"

Выход

Img01

...