Kivy:如何更改 TabbedPanel 的边框?
Kivy: how to change the border of a TabbedPanel?
我现在苦苦挣扎了几个小时,只是为了能够在 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: ""
这是结果 window:
我实际上用绿色突出显示了我要删除的部分。我不想要图片中的这个绿色部分,也就是说我希望我的标签在我的内容旁边没有这个奇怪的边框。
显然,如果我不强制 canvas 变为绿色,我会看到类似这样的内容:
所以我发现我的 TabbedPanelItem 和我的内容之间存在差距,我不知道如何删除它。我试图强制 border 到 0,strip_border 到 0,更改我的小部件的 height,强制 background_image 为 "" ,等等,但我无法实现我想要的。
Kivy 的高手能帮帮我吗?
提前致谢
我怀疑的比较棘手...
按钮存储在 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
method is called and inside of it there's this cute line:
tab_layout.height = (tab_height + tab_layout.padding[1] +
tab_layout.padding[3] + dp(2))
添加 dp(2)
是硬编码的,所以我需要使用负值来抵消它。
我在这里使用下划线属性,它不是已建立的 public API 的一部分,所以这种行为将来可能会改变。
我现在苦苦挣扎了几个小时,只是为了能够在 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: ""
这是结果 window:
我实际上用绿色突出显示了我要删除的部分。我不想要图片中的这个绿色部分,也就是说我希望我的标签在我的内容旁边没有这个奇怪的边框。
显然,如果我不强制 canvas 变为绿色,我会看到类似这样的内容:
所以我发现我的 TabbedPanelItem 和我的内容之间存在差距,我不知道如何删除它。我试图强制 border 到 0,strip_border 到 0,更改我的小部件的 height,强制 background_image 为 "" ,等等,但我无法实现我想要的。
Kivy 的高手能帮帮我吗?
提前致谢
我怀疑的比较棘手...
按钮存储在 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
method is called and inside of it there's this cute line:
tab_layout.height = (tab_height + tab_layout.padding[1] +
tab_layout.padding[3] + dp(2))
添加 dp(2)
是硬编码的,所以我需要使用负值来抵消它。
我在这里使用下划线属性,它不是已建立的 public API 的一部分,所以这种行为将来可能会改变。