代码之家 › 专栏 › 技术社区 › Nirdesh Kumawat

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

kivy-language kivy python-2.7 python

Nirdesh Kumawat · 技术社区 · 8 年前

测验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()

测验千伏

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

我希望菜单中只有右边框(Test1、Test2、Test3)
单击“Test3”菜单时,显示子菜单。我想增加子菜单的宽度,所有菜单应该左对齐。
如何在Test3菜单中添加多级子MNEU
在第二行中,减小图像4之间的间距。jpg和2。jpg公司

2 回复 | 直到 8 年前

Simon Mengong 8 年前

我希望菜单中只有右边框(Test1、Test2、Test3)

您可以设置每个 background_normal 到 '' 然后自己在画布上绘制边框

单击“Test3”菜单时,显示子菜单。我想增加子菜单的宽度,所有菜单应该左对齐。

您必须设置 auto_width 您的财产 DropDown 到 False 然后设置 width 你想要的

如何在Test3菜单中添加多级子MNEU

像第一个一样,你必须连接另一个一个孩子的 下拉列表

在第二行中,减小图像4之间的间距。jpg和2。jpg公司

你只需要设置 spacing 的 BoxLayout

以下是您的代码和所有请求:

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:
            canvas:
                Color:
                    rgb: 0,0,0
                Line:
                    points: self.pos[0] + self.size[0], self.pos[1], self.pos[0] + self.size[0], self.pos[1] + self.size[1]
                    width: 1.5
            spacing : 10
            text: 'test1'
            size : (60,30)
            size_hint : (None, None)
            background_normal: ''
            background_color: 90 , 90, 90, 90
            color: 0, 0.517, 0.705, 1



        Button:
            canvas:
                Color:
                    rgb: 0,0,0
                Line:
                    points: self.pos[0] + self.size[0], self.pos[1], self.pos[0] + self.size[0], self.pos[1] + self.size[1]
                    width: 1.5
            text: 'test2'
            size: (60, 30)
            size_hint: (None, None)
            background_color: 90 , 90, 90, 90
            background_normal: ''
            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_normal: ''
            background_color: 90 , 90, 90, 90
            color: 0, 0.517, 0.705, 1

        CustDrop:
            auto_width: False
            size_hint_x: None
            width: '250dp'
            id: dropdown
            BoxLayout:
                size_hint_y: None
                height: '30dp'
                Button:
                    text: 'Sub menu1 Test3'
                    size_hint_x: None
                    width: '125dp'
                    #on_release: dropdown.select('')
                    on_release: app.root.test
                    background_color: 90 , 90, 90, 90
                    color: 0, 0.517, 0.705, 1
                Button:
                    background_color: 0,0,0,0
                    width: '125dp'
            BoxLayout:
                size_hint_y: None
                height: '30dp'
                Button:
                    text: 'Sub menu2 Test3'
                    size_hint_x: None
                    width: '125dp'
                    on_release: dropdown.select('')
                    background_color: 90 , 90, 90, 90
                    color: 0, 0.517, 0.705, 1
                Button:
                    background_color: 0,0,0,0
                    width: '125dp'
            BoxLayout:
                size_hint_y: None
                height: '30dp'
                Button:
                    text: 'Sub menu3 Test3'
                    size_hint_x: None
                    width: '125dp'
                    on_release: dropdown.select('')
                    background_color: 90 , 90, 90, 90
                    color: 0, 0.517, 0.705, 1
                Button:
                    background_color: 0,0,0,0
                    width: '125dp'
            BoxLayout:
                size_hint_y: None
                height: '30dp'
                Button:
                    text: 'Fourth'
                    size_hint_x: None
                    width: '125dp'
                    on_release: dropdown2.open(d2)
                    background_color: 90 , 90, 90, 90
                    color: 0, 0.517, 0.705, 1
                Button:
                    id: d2
                    background_color: 0,0,0,0
                    size_hint_x: None
                    width: self.parent.width/2.0
                CustDrop:
                    auto_width: False
                    size_hint_x: None
                    width: '125dp'
                    id: dropdown2
                    Button:
                        text: 'Sub menu1 Test3'
                        size_hint_y: None
                        height: '30dp'
                        #on_release: dropdown2.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: dropdown2.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: dropdown2.select('')
                        background_color: 90 , 90, 90, 90
                        color: 0, 0.517, 0.705, 1

    BoxLayout:
        spacing: 0,0
        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

更新前面的添加子菜单

为此,我将子菜单的每个按钮都放在框中,我在同一个框中添加了另一个不可见按钮,即附加到子菜单的不可见按钮

ikolim 8 年前

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

按钮-边框

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

菜单-右边框

border: (0, 16, 0, 0)

子菜单-所有边框关闭

border: (0, 0, 0, 0)

下拉宽度

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

增加下拉宽度

auto-width: False
width: 150

文本对齐-按钮/标签

为了使对齐特性生效,请设置text_大小,该大小指定对齐文本的边界框的大小。例如,以下代码将此大小绑定到按钮/标签的大小,因此文本将在小部件边界内对齐。这也将自动包装按钮/标签的文本,以保持在此区域内。

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公司

主要的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()

主要的千伏

#: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