python - 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: ""

这是生成的窗口:

我实际上用绿色突出显示了我想要删除的部分。我不希望图片中出现这个绿色部分，也就是说我希望我的选项卡位于我的内容旁边，而没有这个奇怪的边框。

显然，如果我不强制 Canvas 为绿色，我会看到如下内容:

所以我看到我的 TabbedPanelItem 和我的内容之间有一个间隙，但我不知道如何删除它。我尝试将边框强制为0，将strip_border强制为0，更改高度我的小部件的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) 是硬编码的，因此我需要使用负值来抵消它。

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