简体   繁体   English

在Kivy中定位选项卡式面板标题

[英]Position Tabbed Panel Header in Kivy

I'm trying to create custom TabbedPanel to control its look and other things. 我正在尝试创建自定义的TabbedPanel以控制其外观和其他功能。 But I can't seem to be able to position the panel. 但是我似乎无法定位面板。 I have colored the strip to green in my example to illustrate this issue. 在我的示例中,我将条带涂成绿色以说明此问题。 I did have a look at this question but I can't seem to figure it out. 我确实看过这个问题,但似乎无法弄清楚。 Tried setting all paddings to zero but without success. 尝试将所有填充设置为零,但未成功。

The panel is slightly offset and is slightly smaller than the strip (as illustrated by the green color). 面板略有偏移,并且比条带略小(如绿色所示)。 How do I change this and remove/control the padding. 如何更改此设置并删除/控制填充。

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout

Builder.load_string('''

<Screen>:
    canvas.before:
        Color:
            rgba: (0.8, 0.5, 1, 1)
        Rectangle:
            size: self.size
            pos: self.pos
    background_normal: ''
    orientation: 'vertical'
    padding: 50

    CustomPanel:
        CustomPanelItem:
            Label:
                text: 'Hello there'


<CustomPanel@TabbedPanel+CustomStrip>:
    do_default_tab: False
    tab_width: self.width 
    padding: 0, 0, 0, 0


<CustomPanelHeader@TabbedPanelHeader>:
    text: 'Long Text for a Tab'
    padding: 0, 0


<CustomPanelItem@TabbedPanelItem+CustomPanelHeader>:
    text: 'Hello World Hello World Hello World'
    padding: 0, 0


<CustomStrip@TabbedPanelStrip>:
    canvas:
        Color:
            rgba: (0, 1, 0, 1) # green
        Rectangle:
            size: self.size
            pos: self.pos

''')


class Screen(BoxLayout):
    pass


class TestApp(App):

    def build(self):
        return Screen()


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

Question 1 - 1 px to the left 问题1-1像素向左

but there still seems to be 1 px to the left ...? 但似乎仍然有1 px的左侧...?

Root Cause - 1 px to the left 根本原因-向左1像素

This is due to the images used by tab which is actually a Button. 这是由于选项卡使用的图像实际上是按钮。

Solution - 1 px to the left 解决方案-左侧1像素

Override class rule, <TabbedPanelHeader> with background_normal: '' and background_color: any rgba color 使用background_normal: ''background_color:任何rgba颜色覆盖类规则<TabbedPanelHeader>

Question 2 - leg room beneath 问题2-腿部下方

... how do I deal with that leg room beneath? ...我该如何处理下方的腿部空间?

Explanation 说明

I believed that it could be by design that the strip / separator is there. 我认为剥离/分离器可能是设计使然。

Questions 问题

The panel is slightly offset and is slightly smaller than the strip (as illustrated by the green color). 面板略有偏移,并且比条带略小(如绿色所示)。 How do I change this and remove/control the padding. 如何更改此设置并删除/控制填充。

Solution

Override the padding in class rule, <StripLayout> and remove all references to padding . 覆盖padding在类规则, <StripLayout>并移除所有引用padding

Snippets 片段

...

<CustomPanelItem@TabbedPanelItem+CustomPanelHeader>:
    text: 'Hello World Hello World Hello World'

<StripLayout>
    padding: 0, 0, 0, 0

<TabbedPanelHeader>:
    background_normal: ''
    background_color: 0, 0, 1, 1    # blue

<CustomStrip@TabbedPanelStrip>:
    canvas:
...

Output 产量

TabbedPanelheader-删除的图像 StripLayout-填充

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM