删除边框并添加多级子菜单

时间:2017-11-04 16:27:23

标签: python python-2.7 kivy kivy-language

test.py

import kivy
kivy.require('1.10.0')

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.dropdown import DropDown
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

from kivy.core.window import Window



class CustDrop(DropDown):
    def __init__(self, **kwargs):
        super(CustDrop, self).__init__( **kwargs)
        self.select('')




class ExampleApp(App):
    def build(self):
        self.root = Builder.load_file('test.kv')
        return self.root


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

test.kv

BoxLayout:
    orientation: 'vertical'
    #spacing : 10
    BoxLayout:
        #spacing : 10
        canvas.before:
            Rectangle:
                pos: self.pos
                size: self.size

            #Color:
                #rgb: (70,70,70)

        size_hint_y:1
        Button:
            spacing : 10
            text: 'test1'
            size : (60,30)
            size_hint : (None, None)
            background_color: 90 , 90, 90, 90
            color: 0, 0.517, 0.705, 1



        Button:
            text: 'test2'
            size: (60, 30)
            size_hint: (None, None)
            background_color: 90 , 90, 90, 90
            color: 0, 0.517, 0.705, 1

        Button:
            id: btn
            text: 'test3'
            size: (60, 30)
            size_hint: (None, None)
            on_release: dropdown.open(self)
            #size_hint_y: None
            #height: '40dp'
            background_color: 90 , 90, 90, 90
            color: 0, 0.517, 0.705, 1

        CustDrop:

            id: dropdown

            Button:
                text: 'Sub menu1 Test3'
                size_hint_y: None
                height: '30dp'
                #on_release: dropdown.select('')
                on_release: app.root.test
                background_color: 90 , 90, 90, 90
                color: 0, 0.517, 0.705, 1

            Button:
                text: 'Sub menu2 Test3'
                size_hint_y: None
                height: '30dp'
                on_release: dropdown.select('')
                background_color: 90 , 90, 90, 90
                color: 0, 0.517, 0.705, 1


            Button:
                text: 'Sub menu3 Test3'
                size_hint_y: None
                height: '30dp'
                on_release: dropdown.select('')
                background_color: 90 , 90, 90, 90
                color: 0, 0.517, 0.705, 1

            Button:
                text: 'Fourth'
                size_hint_y: None
                height: '30dp'
                on_release: dropdown.select('')
                background_color: 90 , 90, 90, 90
                color: 0, 0.517, 0.705, 1

    BoxLayout:

        canvas.before:
            Rectangle:
                pos: self.pos
                size: self.size

            Color:
                rgb: (1,1,1)

        AsyncImage
            source: '2.jpg'

        AsyncImage
            source: '4.jpg'

        AsyncImage
            source: '2.jpg'

        Label:
            size_hint_x: 22

    Label:
        size_hint_y: 18
  1. 我想在菜单中只有右边框(Test1,Test2,Test3)
  2. 点击' Test3'菜单然后显示子菜单。我想增加子菜单的宽度,所有菜单应保持对齐。
  3. 如何在Test3菜单中添加多级submneu
  4. 在第二行减少图像4.jpg和2.jpg之间的空间

2 个答案:

答案 0 :(得分:2)

  

我想在菜单中只有右边框(Test1,Test2,Test3)

您可以将每个background_normal设置为'',然后在画布中自行绘制边框

  

点击'Test3'菜单然后显示子菜单。我想增加子菜单的宽度,所有菜单都应保持对齐。

您必须将auto_width的{​​{1}}属性设置为DropDown,然后设置您想要的False

  

如何在Test3菜单中添加多级submneu

首先,您必须将另一个width附加到DropDown

的一个孩子身上
  

在第二行减少图像4.jpg和2.jpg之间的空间

您只需设置DropDown

spacing即可

以下是您的所有要求的代码:

BoxLayout

更新前面的子子菜单

要做到这一点我把子菜单的每个按钮放在框中我在同一个框中添加另一个隐形按钮,它是隐藏的按钮,它被附加到子子菜单

我希望这有帮助!

答案 1 :(得分:1)

有关详细信息,请参阅以下说明,解决方案和示例。

按钮 - 边框

边框信息的格式为(底部,右侧,顶部,左侧)。每个值都以像素为单位。边框默认为(16,16,16,16)。在kv文件中使用以下内容:

菜单 - 右边框

border: (0, 16, 0, 0)

子菜单 - 全部边框关闭

border: (0, 0, 0, 0)

下拉宽度

默认情况下,下拉列表的宽度将与附加窗口小部件的宽度相同。如果要提供自己的宽度,请将auto-width设置为False。在kv文件中使用以下内容。

增加下拉宽度

auto-width: False
width: 150

文本对齐 - 按钮/标签

默认情况下,文本图像(纹理)只是足够大以包含字符并位于中心。如果您的文字有换行符,则valign属性将不起作用,halign将仅起作用;即使halign设置为left(默认情况下),单行文本也会显示为居中。

为了使对齐属性生效,请设置text_size,它指定文本对齐的边界框的大小。例如,以下代码将此大小绑定到Button / Label的大小,因此文本将在小部件边界内对齐。这也将自动包裹Button / Label的文本以保留在此区域内。

padding_x是小部件框内文本的水平填充。它默认为0.以下代码的值为5,因此文本不接近右边框。

左对齐

text_size: self.size
valign: "middle"
padding_x: 5

图像 - 减少空间

AsyncImage意味着异步加载图像。它会阻止您的应用程序等待图像加载。如果要显示大图像或从URL中检索它们,使用AsyncImage将允许在后台线程上检索这些资源,而不会阻止您的应用程序。

例如,如果您希望图像靠近之前的图像,则可以执行以下操作:

AsyncImage:
    canvas:
        Rectangle:
            texture: CoreImage("linux.png").texture
            size: self.width, self.height
            pos: self.x - 8, self.y

按钮/标签 - 重复设置

不必为每个按钮/标签重复相同的值,我们可以使用模板,如下所示。仅通过此规则的声明创建的动态类继承自Button类,并允许我们更改默认值并为其所有实例创建绑定,而无需在Python端添加任何新代码。

模板

    <DropdownButton@Button>:
        border: (0, 16, 0, 16)
        text_size: self.size
        valign: "middle"
        padding_x: 5
        size_hint_y: None
        height: '30dp'
        on_release: app.root.test
        background_color: 90 , 90, 90, 90
        color: 0, 0.517, 0.705, 1

    <MenuButton@Button>:
        text_size: self.size
        valign: "middle"
        padding_x: 5
        size : (60,30)
        size_hint : (None, None)
        background_color: 90 , 90, 90, 90
        color: 0, 0.517, 0.705, 1
        border: (0, 16, 0, 0)

<CustDrop>:
    auto_width: False
    width: 150
    DropdownButton:
        text: 'Sub menu1 Test3'

    DropdownButton:
        text: 'Sub menu2 Test3'

BoxLayout:
    orientation: 'vertical'

    BoxLayout:
        MenuButton:
            text: 'test1'

        MenuButton:
            text: 'test2'

        MenuButton:
            id: btn
            text: 'test3'
            on_release: dropdown.open(self)

Examaple

main.py

from kivy.app import App
from kivy.uix.dropdown import DropDown
from kivy.lang import Builder


class CustDrop(DropDown):
    def __init__(self, **kwargs):
        super(CustDrop, self).__init__(**kwargs)
        self.select('')


class ExampleApp(App):
    def build(self):
        self.root = Builder.load_file('main.kv')
        return self.root


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

main.kv

#:kivy 1.10.0
#:import CoreImage kivy.core.image.Image

<DropdownButton@Button>:
    border: (0, 16, 0, 16)
    text_size: self.size
    valign: "middle"
    padding_x: 5
    size_hint_y: None
    height: '30dp'
    #on_release: dropdown.select('')
    on_release: app.root.test
    background_color: 90 , 90, 90, 90
    color: 0, 0.517, 0.705, 1


<CustDrop>:
    auto_width: False
    width: 150
    DropdownButton:
        text: 'Sub menu1 Test3'

    DropdownButton:
        text: 'Sub menu2 Test3'

    DropdownButton:
        text: 'Sub menu3 Test3'

    DropdownButton:
        text: 'Fourth'


<MenuButton@Button>:
    text_size: self.size
    valign: "middle"
    padding_x: 5
    size : (60,30)
    size_hint : (None, None)
    background_color: 90 , 90, 90, 90
    color: 0, 0.517, 0.705, 1
    border: (0, 16, 0, 0)


BoxLayout:
    orientation: 'vertical'
    #spacing : 10

    BoxLayout:
        canvas.before:
            Rectangle:
                pos: self.pos
                size: self.size

        size_hint_y: 1

        MenuButton:
            text: 'test1'

        MenuButton:
            text: 'test2'

        MenuButton:
            id: btn
            text: 'test3'
            on_release: dropdown.open(self)

        CustDrop:
            id: dropdown

    BoxLayout:
        canvas.before:
            Rectangle:
                pos: self.pos
                size: self.size

            Color:
                rgb: (1,1,1)

        AsyncImage:
            source: "linux.png"     # '2.jpg'

        AsyncImage:
            source: "macosx.png"    # '4.jpg'

        AsyncImage:
            canvas:
                Rectangle:
                    texture: CoreImage("linux.png").texture    # '2.jpg'
                    size: self.width, self.height
                    pos: self.x - 8, self.y

        Label:
            size_hint_x: 22

    Label:
        size_hint_y: 18

输出

enter image description here enter image description here