Почему на разных устройствах это выглядит по-разному? Киви

Question

Я написал приложение на P C, а затем скомпилировал его для android, но результат другой.

Мне нужен код python, чтобы он выглядел так, как он есть на самом деле.

Да, я знаю, что разные устройства имеют разную плотность пикселей, кто-нибудь подскажет, как решить мою проблему?

введите описание изображения здесь

main.py:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen

class Test1(Screen):
    pass
class Test2(Screen):
    pass

kvfile = Builder.load_file('main.kv')
class MainApp(App):
    def build(self):
        return kvfile

    def change_screen(self, screen_name):
        screen_manager = self.root.ids['screen_manager']
        screen_manager.current = screen_name

MainApp().run()

main.kv:

<Test1>:
FloatLayout:
    canvas:
        Color:
            rgba: hex('#D8D8D8')
        Rectangle:
            pos: 0, 565
            size: 1500, 2
        Rectangle:
            pos: 0, 48
            size: 1500, 2
    canvas.before:
        Color:
            rgba: hex('#ffffff')
        Rectangle:
            pos: self.pos
            size: self.size
    BoxLayout:
        pos_hint: {'top': 1, 'center_x': .5}
        size_hint_y: .055
        Label:
            text: 'ABC'
            bold: True
            background_color: hex('#ECEDF1')
            color: hex('#2D2E30')
    BoxLayout:
        pos_hint: {'top': .92, 'center_x': .5}
        size_hint_y: .82
        ScrollView:
            GridLayout:
                cols: 1
                size_hint_y: None
                row_default_height: 50
                height: self.minimum_height
                Label:
                    text: '  A'
                    bold: True
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  B"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  C"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  D"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  E"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  F"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  G"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Label:
                    text: "  H"
                    bold: True
                    background_color: hex('#ECEDF1')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  I"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  J"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'
                Button:
                    text: "  K"
                    bold: True
                    background_normal: ''
                    background_down: ''
                    background_color: hex('#ffffff')
                    color: hex('#2D2E30')
                    text_size: self.size
                    halign: 'left'
                    valign: 'middle'

    BoxLayout:
        pos_hint: {'top': .08, 'center_x': .5}
        size_hint_y: .08
        Button:
            text: 'A'
            bold: True
            background_normal: ''
            background_down: ''
            background_color: hex('#ECEDF1')
            color: hex('#2D2E30')
            on_press:
                app.change_screen('test1')
        Button:
            text: 'B'
            bold: True
            background_normal: ''
            background_down: ''
            background_color: hex('#ECEDF1')
            color: hex('#2D2E30')
            on_press:
                app.change_screen('test2')

Answer 1

Итак, вы правильно поняли основную идею. На самом деле именно dp заставляет эти буквы собираться вместе.

Kivy предлагает большое количество единиц измерения, которые вы можете использовать для позиционирования и изменения размера ваших виджетов в kivy. В настоящее время большая часть вашего кода использует только размер пикселя (вы указываете количество пикселей напрямую), что для небольшой программы достаточно хорошо. Но как только ваша программа должна масштабироваться на нескольких устройствах, этих единиц пикселей будет недостаточно.

В этом случае вы можете использовать единицы dp, чтобы лучше позиционировать виджеты.

Вместо

GridLayout:
    cols: 1
    size_hint_y: None
    row_default_height: 50
    height: self.minimum_height

просто добавьте

GridLayout:
    cols: 1
    size_hint_y: None
    row_default_height: 50dp
    height: self.minimum_height

, т.е. добавьте dp после значения row_default_height. Значения не будут точными, возможно, вам придется изменить их, чтобы вернуть исходное положение. Вы можете получить дополнительную информацию здесь https://kivy.org/doc/stable/api-kivy.metrics.html