Kivy：如何更改 TabbedPanel 的边框？

Question

我现在挣扎了好几个小时，只是为了能够在 Kivy 中自定义我的 TabbedPanel 的样式。这是我的代码：

#: import Utils kivy.utils

BoxLayout:
    spacing: 0
    padding: 0
    canvas:
        Color:
            rgb: Utils.get_color_from_hex("#1b262d")[:3]
        Rectangle:
            size: self.size

    TabbedPanel:
        do_default_tab: False
        tab_width: self.size[0] / 2

        canvas:
            Color:
                rgb: Utils.get_color_from_hex("#00ff00")[:3]
            Rectangle:
                size: self.size

        TabbedPanelItem:
            background_color: Utils.get_color_from_hex("#1b262d")
            text: "PAST"
            background_down: ""
            background_normal: ""


            BoxLayout:
                orientation: "vertical"
                canvas:
                    Color:
                        rgb: Utils.get_color_from_hex("#1b262d")[:3]
                    Rectangle:
                        size: self.size
                        pos: self.pos

                BoxLayout:
                    padding: [10, 12, 10, 12]
                    spacing: 5
                    size_hint_y: 0.1
                    TextInput:
                        background_color: Utils.get_color_from_hex("#303E46")
                        foreground_color: [1, 1, 1, 1]
                        size_hint_x: 0.2
                        padding: [10, ( self.height - self.line_height ) / 2]
                        text: "DATES"
                    TextInput:
                        size_hint_x: 0.15
                        padding: [10, ( self.height - self.line_height ) / 2]
                        text: "TEST"
                    TextInput:
                        size_hint_x: 0.2
                        padding: [10, ( self.height - self.line_height ) / 2]
                        text: "CAT"
                    TextInput:
                        size_hint_x: 0.15
                        padding: [10, ( self.height - self.line_height ) / 2]
                        text: "SORT BY"
                    TextInput:
                        size_hint_x: 0.15
                        padding: [10, ( self.height - self.line_height ) / 2]
                        text: "SHOW ONLY"
                    TextInput:
                        size_hint_x: 0.15
                        padding: [10, ( self.height - self.line_height ) / 2]
                        text: "SEARCH"

                BoxLayout:
                    size_hint_y: 0.8
                    spacing: 10
                    padding: 10
                    orientation: "horizontal"
                    canvas:
                        Color:
                            rgb: Utils.get_color_from_hex("#303E46")[:3]
                        Rectangle:
                            size: self.size
                            pos: self.pos


                    Button:
                        size_hint_x: 0.7
                        text: "TEST"
                    Button:
                        size_hint_x: 0.3
                        text: "TESTS"

        TabbedPanelItem:
            background_color: Utils.get_color_from_hex("#303E46")
            text: "UPCOMING"
            background_down: ""
            background_normal: ""

这是生成的窗口：

我实际上用绿色突出显示了我要删除的部分。我不希望图片中有这个绿色部分，也就是说我希望我的标签在我的内容旁边没有这个奇怪的边框。

显然，如果我不强制画布为绿色，我会看到如下内容：

所以我看到我的 TabbedPanelItem 和我的内容之间存在差距，我不知道如何删除它。我试图强制 border 为 0，strip_border 为 0，改变 height strong> 我的小部件，强制 background_image 到 "" 等，但我无法实现我想要的。

Kivy 的专家可以帮帮我吗？

提前谢谢你

Answer 1

我怀疑这更棘手......

按钮存储在TabbedPanel 的_tab_layout 属性中。这是一个GridLayout 子类，您可以更改它的padding 属性。这是一个例子：

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

Builder.load_string('''
<StripLayoust>:
    canvas:
        Color:
            rgba: (0, 1, 0, 1) # green
        Rectangle:
            size: self.size
            pos: self.pos

<MainClass>:
    TabbedPanel:
        id: panel
        do_default_tab: False
        TabbedPanelItem:
            text: "1"
            Widget:
                canvas:
                    Color:
                        rgb: 0.1, 0.3, .02
                    Rectangle:
                        size: self.size
                        pos: self.pos
        TabbedPanelItem:
            text: "2"
            Widget:
                canvas:
                    Color:
                        rgb: 0.7, 0.6, .02
                    Rectangle:
                        size: self.size
                        pos: self.pos
''')

class MainClass(FloatLayout):
    def __init__(self, *args):
        super(MainClass, self).__init__(*args)
        self.ids["panel"]._tab_layout.padding = '2dp', '2dp', '2dp', '-2dp'

class TestApp(App):
    def build(self):
        return MainClass()

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

请注意，要删除此边框，我必须将底部填充设置为 -2dp 而不仅仅是 0dp。为什么？好吧，事实证明，每次面板更改时，都会调用其update_tabs 方法，并且在其中有this cute line：

            tab_layout.height = (tab_height + tab_layout.padding[1] +
tab_layout.padding[3] + dp(2))

在此处添加 dp(2) 是硬编码的，因此我需要使用负值来抵消它。

我在这里使用下划线属性，它不是已建立的公共 API 的一部分，因此这种行为将来可能会改变。