如何在 Python 中使用 kivy 在 TabeedPanel 中使用 GridLayout

Question

我正在尝试使用 kivy 和 TabeedPanel 在 python 中制作 GUI。放置标签、TextInput、按钮的确切位置会出现一些问题。我无法完全放置多个标签 TextInput。这就是我在代码中注释的原因。我也尝试了 GridLayout，但无法准确安排。 你能帮助我吗？提前致谢。

from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel, TabbedPanelItem
from kivy.lang import Builder
from kivy.uix.checkbox import CheckBox
from kivy.uix.button import Button
from kivy.app import App
from kivy.uix.textinput import TextInput
import json

Builder.load_string("""

<Test>:
    do_default_tab: False

    TabbedPanelItem:
        text: 'page1'
        BoxLayout:
            Label:
                text: 'label'
            TextInput:
                text: 'TextInput'
            CheckBox: 
                text: 'CheckBox'
            Button:
                text: 'save'

    #BoxLayout:
     #   orientation: 'vertical'
      #  BoxLayout:
       #     orientation: 'horizontal'
        #    Label:
         #       text: 'label'



    TabbedPanelItem:
        text: 'page2'
        BoxLayout:
            Label:
                text: 'number1'
        #TextInput:
        #   text: 'TextInput'
            Label:
                text: 'number2'
       # TextInput:
       #    text: 'TextInput'
            Button:
                text: 'button'

""")

class Test(TabbedPanel):
    pass

class MyApp(App):

    def build(self):
        test = Test()
        return test


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

Answer 1

按照您的示例，您可以使用 BoxLayouts 但您需要正确嵌套它们：

from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder

Builder.load_string("""

<Test>:
    do_default_tab: False

    TabbedPanelItem:
        text: 'page1'

        BoxLayout:
            padding: 50, 50, 50, 50
            orientation: 'horizontal'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                size_hint_x: 1
                Label:
                    text: 'label'
                Label:
                    text: 'label'
                Label:
                    text: 'label'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                TextInput:
                    text: 'TextInput'
                TextInput:
                    text: 'TextInput'
                TextInput:
                    text: 'TextInput'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                size_hint_x: 0.40
                CheckBox: 
                    text: 'CheckBox'
                CheckBox: 
                    text: 'CheckBox'
                CheckBox: 
                    text: 'CheckBox'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                size_hint_x: 0.60
                Button:
                    text: 'save'
                Button:
                    text: 'save'
                Button:
                    text: 'save'


    TabbedPanelItem:
        text: 'page2'

        BoxLayout:
            padding: 50, 50, 50, 50
            orientation: 'horizontal'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                Label:
                    text: 'label'
                Label:
                    text: 'label'
                Label:

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                TextInput:
                    text: 'TextInput'
                TextInput:
                    text: 'TextInput'
                Button:
                    spacing: 100
                    text: 'button'

""")

class Test(TabbedPanel):
    pass

class MyApp(App):

    def build(self):
        test = Test()
        return test


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

输出：

Answer 2

这是一个使用 GridLayout 的示例，我在您的其他问题中提到了该示例。仅供参考，有很多方法可以解决这个问题。我个人喜欢在表单中使用 gridlayout，因为如果需要的话，很容易放置 ScrollViews。

阅读 kv 语言 here 以帮助保持干燥和其他事情。如果一个小部件是在 kv 中定义的，那么您不需要在文件顶部导入它们。

例子：

from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder

Builder.load_string("""
<MyLabel@Label>:
    size_hint: (None, None)
    size: (400, 100)

<MyTextInput@TextInput>:
    size_hint: (None, None)
    size: (600, 100)

<MyButton@Button>:
    size_hint: (None, None)
    size: (400, 100)

<MyCheckBox@AnchorLayout>:
    # I'm nesting the checkbox here b/c it is hard to see if the background is not lightened.
    size_hint: (None, None)
    size: (100, 100)
    anchor_x: "center"
    anchor_y: "center"
    canvas.before:
        Color:
            rgba: [0.7, 0.7, 0.7, 1]
        Rectangle:
            pos: self.pos
            size: self.size
    CheckBox:

<Test>:
    do_default_tab: False

    TabbedPanelItem:
        text: 'page1'
        GridLayout:
            rows: 3
            cols: 4
            padding: [10, 100]
            spacing: [10, 50]
            MyLabel:
                text: "Label 1"
            MyTextInput:
            MyCheckBox:
            MyButton:
                text: "Button 1"
            MyLabel:
                text: "Label 3"
            MyTextInput:
            MyCheckBox:
            MyButton:
                text: "Button 2"
            MyLabel:
                text: "Label 3"
            MyTextInput:
            MyCheckBox:
            MyButton:
                text: "Button 3"


    TabbedPanelItem:
        text: 'page2'
        GridLayout:
            rows: 3
            cols: 2
            padding: [10, 100]
            spacing: [10, 50]
            MyLabel:
                text: "Label 1"
            MyTextInput:

            MyLabel:
                text: "Label 2"
            MyTextInput:

            # blank spacer widget
            Widget:
                size_hint: (None, None)
                size: (400, 100)
            MyButton:
                text: "Button"
""")


class Test(TabbedPanel):
    pass


class MyApp(App):

    def build(self):
        return Test()


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