Я не понимаю, как сохранить одинаковый относительный размер всех элементов при изменении размера окна

Question

Когда приложение работает в окне, кнопка и метки находятся в нужных местах, именно там, где я хочу их, но когда я просматриваю окно в полноэкранном режиме, все перемещается не к месту

Я попытался возитьсяс отступами и высотой расположения блоков и свойств метки, но я просто получаю неправильный результат.

*. Py

import kivy
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image


class LoginReg(BoxLayout):
    pass


class LoginApp(App):
    def build(self):
        return LoginReg()

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

*. Kv

#:kivy 1.0
#:import hex kivy.utils.get_color_from_hex
<TextInput>:
    size_hint_y: None
    height:30
<Label>:
    size_hint_y: None
    height:30
    color: 0,0,0,1
<FlatButton@ButtonBehavior+Label>:
    font_size: 18
<LoginReg>:
    id: main_win
    orientation: "vertical"
    spacing: 10
    space_x: self.size[0]/3
    space_y: 40
#Code for background start
    BoxLayout:
        id: background
        orientation: 'vertical'
        canvas.before:
            Color:
                rgba: hex('#f2f2f2f2')
            Rectangle:
                size: self.size
                pos: self.pos
        BoxLayout:
            id: header
            size_hint_y:None
            height: 50
            canvas.before:
                Color:
                    rgba: hex('#1A5276')
                Rectangle:
                    size: self.size
                    pos: self.pos
            FlatButton:
                text:"Virtual Assistant"
                color: (1,1,1,1)
        BoxLayout:
            orientation: 'vertical'
            padding: main_win.space_x, main_win.space_y
            BoxLayout:
                spacing: 10
                orientation: 'vertical'
                padding: 50
                canvas.before:
                    Color:
                        rgba: hex('#111')
                    Rectangle:
                        size: self.size
                        pos: self.pos
                Label:
                    text: "Login: "
                TextInput:
                    hint_text: "Username"
                    multiline: False
                Label:
                    text: "Password: "
                TextInput:
                    hint_text: "password"
                    multiline: False
                Button:
                    text:"Login"
                    size_hint_y: None
                    height: 60
                    background_color: (2.08, 2.40, 1.92,1)
        Label:
            id:sp
            size_hint_y:None
            height: 200

Я не получаю никаких сообщений об ошибках, я просто хочу разобраться, как все относительно этогоего размер при изменении размера окна.

Answer 1

Лучший способ получить все, чтобы сохранить относительный размер / положение, это использовать подсказки. Используйте size_hint для размеров и pos_hint для позиций. Кроме того, не добавляйте ненужную сложность к своему макету. В вашем опубликованном коде ваш LoginReg - это BoxLayout, и единственный элемент, который у вас есть, это еще один BoxLayout. Точно так же позже в вашем kv у вас есть еще одна вертикаль BoxLayout, единственным дочерним элементом которой является другая вертикаль BoxLayout. Это ненужная сложность. Вот более простая версия вашего кода, которая, я считаю, выполнила то, что вы хотите:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout


class LoginReg(FloatLayout):
    pass


Builder.load_string('''
#:kivy 1.0
#:import hex kivy.utils.get_color_from_hex
<TextInput>:
    size_hint_y: None
    height:30
<Label>:
    size_hint_y: None
    height:30
    color: 0,0,0,1
<FlatButton@ButtonBehavior+Label>:
    font_size: 18
<LoginReg>:
    spacing: 10
    #Code for background start
    canvas.before:
        Color:
            rgba: hex('#f2f2f2f2')
        Rectangle:
            size: self.size
            pos: self.pos
    FlatButton:
        id: fb
        canvas.before:
            Color:
                rgba: hex('#1A5276')
            Rectangle:
                size: self.size
                pos: self.pos
        pos_hint: {'center_x': 0.5, 'top':1.0}
        size_hint_y:None
        height: 50
        text:"Virtual Assistant"
        color: (1,1,1,1)
    BoxLayout:
        spacing: 10
        orientation: 'vertical'
        padding: 50
        canvas.before:
            Color:
                rgba: hex('#111')
            Rectangle:
                size: self.size
                pos: self.pos
        pos_hint: {'center_x': 0.5, 'top': (root.height - fb.height)/root.height}
        size_hint: 0.33, None
        size_hint_min_x: 200
        height: self.minimum_height
        Label:
            text: "Login: "
        TextInput:
            id: ti
            hint_text: "Username"
            multiline: False
        Label:
            text: "Password: "
        TextInput:
            hint_text: "password"
            multiline: False
        Button:
            text:"Login"
            size_hint_y: None
            height: 60
            background_color: (2.08, 2.40, 1.92,1)
''')


class LoginApp(App):
    def build(self):
        return LoginReg()


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

Я использовал Builder.load_string вместо файла только для собственного удобства.

Важные изменениядолжны LoginReg расширять FloatLayout только потому, что это обеспечивает большую гибкость, чем BoxLayout. Я удалил все BoxLayouts, у которых был только один BoxLayout ребенок.

FlatButton теперь использует pos_hint, чтобы расположить его на вершине LoginReg.

. BoxLayout внутри Loginreg использует pos_hint, чтобы центрировать его по горизонтали и расположить вертикально чуть ниже FlatButton. Он также использует size_hint, чтобы сделать его ширину одной трети ширины LoginReg, но с минимальной шириной 200. Его высота установлена ​​для использования минимальной высоты, которая будет содержать его дочерние элементы.