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

Posted 2023-04-18

【中文标题】如何在 Python 中使用 kivy 在 TabeedPanel 中使用 GridLayout

【英文标题】：how to use GridLayout in TabeedPanel using kivy in python

【发布时间】：2017-12-22 00:04:27

【问题描述】：

我正在尝试使用 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()

【参考方案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()

输出：

【参考方案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()

【讨论】：

如何动态填充label和TextInput？就像这些值作为映射（键，值对）和json格式存储在变量中一样 var = '"a" : " Goc" , "b" : "Coc", "c" : "Dow" ') 在运行时，使用任何循环，标签和 TextInput 应该自动填充。注意：这里的“键”数据应显示在标签处，“值”显示在 TextInput 处。即：a：Goc，b：Coc，c：Dow。所以 a,b,c 是标签，Goc, Coc, Dow 是 TextInput。

以上内容只针对“page1”