Kivy，ScreenManager 尺寸問題

Question

我正在嘗試使用 Kivy 為 Android 創建一個游戲。目前，我的想法是擁有主菜單，然后是導航按鈕。 （即屏幕尺寸需要為 9:16）

---

起初，我設計了整個主菜單（按鈕的位置等），一切都很完美。

但是，要繼續前進，我必須開始使用“ScreenManager”。 一旦我這樣做了，所有的按鈕和尺寸都非常錯誤而且很大。

經過進一步檢查，我意識到這只發生在將“class MainMenu( Widget ):”更改為“class MainMenu( Screen )”時，我不知道為什么或如何會產生如此大的差異，修復是。

我將嘗試提供屏幕截圖以幫助進一步解釋我的意思。

之前：

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.config import Config

Config.set('graphics', 'width', '900')
Config.set('graphics', 'height', '1600')    


class MainMenu(Widget):
    pass


class BackGardenApp(App):
    def build(self):
        return MainMenu()


BackGardenApp().run()

Kv 之前：

<MainMenu>:
    name: "MainMenu"
    canvas:
        Rectangle:
            source: 'Background.Jpg'
            size: root.width, root.height

    Label:
        bold: 'true'
        font_name: 'Misty Cotton.ttf'
        font_size : root.width * 0.25
        center_x : root.width / 2
        top: root.top * .92
        text: "Back"
    Label:
        bold: 'true'
        font_name: 'Misty Cotton.ttf'
        font_size : root.width * 0.25
        center_x : root.width / 2
        top: root.top * .75
        text: "Garden"

    Button:
        text: "Play"
        font_name: 'font3.ttf'
        font_size: root.width * .06
        size: root.width*.8 + 100, root.height*0.1
        background_normal: 'ButtonLong.png'
        background_down: 'ButtonLongPressed.png'
        pos: ((root.width/2)-((root.width*.8 + 100)/2)), root.height * 0.18

    Button:
        text: "Settings"
        font_name: 'font3.ttf'
        font_size: root.width * .06
        size: root.width*.4, root.height*0.1
        background_normal: 'Button.png'
        background_down: 'ButtonPressed.png'
        pos: root.width*0.5 + 50, root.height * 0.0625

    Button:
        text: "Shop"
        font_name: 'font3.ttf'
        font_size: root.width * .06
        size: root.width*.4, root.height*0.1
        background_normal: 'Button.png'
        background_down: 'ButtonPressed.png'
        pos: root.width*0.1 - 50, root.height * 0.0625

派之后：

from kivy.app import App
# from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition

width = 900
height = 1600


def screensize():
    Window.size = (width, height)


class LoadingIn(Screen):
    screensize()
    pass


class MainMenu(Screen):
    screensize()
    pass


class ScreenManagement(ScreenManager):
    screensize()
    pass


kv = Builder.load_file("BackGarden.kv")


class BackGardenApp(App):
    def build(self):
        return kv


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

Kv After：（數字是百分比，因為它允許它以任何 window 尺寸提供。）

#: import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManagement:
    transition: FadeTransition()
    LoadingIn:
    MainMenu:

<LoadingIn>
    name: "Loading"
    Button:
        on_release: app.root.current = "MainMenu"

<MainMenu>:
    name: "MainMenu"
    canvas:
        Rectangle:
            source: 'background.jpg'
            size: root.width, root.height

    Label:
        id: logo1
        bold: 'true'
        font_name: 'Misty Cotton.ttf'
        font_size : (root.width * 0.35)
        center_x : root.width / 2
        top: root.top * .90
        text: "Back"
    Label:
        id: logo2
        bold: 'true'
        font_name: 'Misty Cotton.ttf'
        font_size : (root.width * 0.35)
        center_x : root.width / 2
        top: root.top * .75
        text: "Garden"

    Button:
        text: "Play"
        font_name: 'font3.ttf'
        font_size: root.width * .06
        size: root.width*.8 + 100, root.height*0.1
        background_normal: 'ButtonLong.png'
        background_down: 'ButtonLongPressed.png'
        pos: ((root.width/2)-((root.width*.8 + 100)/2)), root.height * 0.18

    Button:
        text: "Settings"
        font_name: 'font3.ttf'
        font_size: root.width * .06
        size: root.width*.4, root.height*0.1
        background_normal: 'Button.png'
        background_down: 'ButtonPressed.png'
        pos: root.width*0.5 + 50, root.height * 0.0625

    Button:
        text: "Shop"
        font_name: 'font3.ttf'
        font_size: root.width * .06
        size: root.width*.1, root.height*0.1
        background_normal: 'Button.png'
        background_down: 'ButtonPressed.png'
        pos: root.width*0.1 - 50, root.height * 0.0625

Answer 1

我懷疑問題是由於屏幕 class 識別出諸如 size_hint 之類的東西，而小部件 class 卻沒有。 所以 Shop 按鈕的大小將由它的 size_hint 而不是它的大小來定義。 嘗試將 size: root.width*.1, root.height*0.1 更改為 size_hint: 0.1, 0.1，其他按鈕也類似。