如何在所有按钮和标签后面添加矩形图形？

Question

我想在每行包含 3 个按钮和两个标签的小部件后面添加一个圆角矩形，所有这些都水平布局。每个组的内容都是通过底部的 input_text 和“+”按钮动态添加的。我的所有主要部分都在工作，但我无法获得圆角矩形图形。

这是我目前得到的：

我希望创造这样的东西：

请让我知道我哪里出了问题以及如何解决它我是 Kivy 的新手，所以我只是在学习。

谢谢。

class Trackers(Screen):
    storage = {}
    path = ''

def on_pre_enter(self):
    self.path = App.get_running_app().user_data_dir + '/'
    self.loadData()
    for tracker, num in self.storage.items():
        self.ids.track.add_widget(Tracker(text=tracker, number=num, data=self.storage))

def addWidget(self):
    text_input = self.ids.text_input.text
    num = '0'
    if text_input not in self.storage.keys():
        self.ids.track.add_widget(Tracker(text=text_input, number=num, data=self.storage))
        self.storage[text_input] = '0'
        self.ids.text_input.text = ''
        self.saveData()


class Tracker(BoxLayout):
    def __init__(self, text='', number='', data={}, **kwargs):
        super().__init__(**kwargs)
        self.ids.label.text = text
        self.ids.count_add.text = number

class Pess(App):

    def build(self):
        Config.set('graphics', 'width', '600')
        Config.set('graphics', 'height', '800')
        from kivy.core.window import Window
        Window.clearcolor = get_color_from_hex('#262829')

        return ScreenGenerator()

 ##### --> .kv file
<Trackers>:
    BoxLayout:
        orientation: 'vertical'
        ActionBar:
            height: 45
            size_hint_y: None
            background_image: ''
            background_color: rgba('#0B3242')
            ActionView:
                ActionPrevious:
                    title: '[b]TRACKERS[/b]'
                    font_size: 21
                    color: rgba('#AFB7BA')
                    markup: True
                    on_release: app.root.current = 'menu'
                ActionButton:
                    text: 'SEND'
                    color: rgba('#AFB7BA')
                    on_release: root.send()
        ScrollView:
            BoxLayout:
                id: track
                orientation: 'vertical'
                font_size: 15
                size_hint_y: None
                height: self.minimum_height
        BoxLayout:
            size_hint_y: None
            height: 45
            TextInput:
                id: text_input
                hint_text: 'Add Trackers'
                multiline: False
            Button:
                text: '+'
                size_hint_x: None
                width: 60
                on_release: root.addWidget()
                background_color: rgba('#1D7332')

<Tracker>:
    count_add: count_add
    size_hint_y: None
    height: 45
    padding: 4

    Button:
        text: '[b]X[/b]'
        markup: True
        size_hint_x: None
        width: 60
        on_release: app.root.get_screen('track').delete_storage(root)

    Label:
        id: label
        font_size: 20

    Label:
        id: count_add
        font_size: 20
        text: '0'

    Button:
        text: '[b]-[/b]'
        markup: True
        size_hint_x: None
        width: 60
        on_release: app.root.get_screen('track').subtract_num(root)

    Button:
        text: '[b]+[/b]'
        markup: True
        size_hint_x: None
        width: 60
        on_release: app.root.get_screen('track').add_num(root)

Answer 1

在您的“kv”文件中，您可以将图形添加到您的Tracker 的Canvas，如下所示：

<Tracker>:
    count_add: count_add
    size_hint_y: None
    height: 45
    padding: 20, 4, 20, 4   # to keep widgets a bit away from the sides

    canvas.before:    # use before to keep this under any widgets
        Color:
            rgba: 1, 0, 0, 1   # any color you want
        Rectangle:
            pos: self.pos[0] + self.height/2, self.pos[1]
            size: self.size[0] - self.height, self.height
        Ellipse:
            pos: self.pos[0], self.pos[1]
            size: self.height, self.height
        Ellipse:
            pos: self.pos[0] + self.width - self.height, self.pos[1]
            size: self.height, self.height

您可能希望在 track id BoxLayout 中添加一些间距，以便 Tracker 小部件不会显示为连接。

这是我运行的代码的完整版本。由于您没有提供所有代码，因此注释掉了几行：

from kivy.config import Config
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import get_color_from_hex
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen, ScreenManager


class Trackers(Screen):
    storage = {}
    path = ''

    def on_pre_enter(self):
        self.path = App.get_running_app().user_data_dir + '/'
        #self.loadData()
        for tracker, num in self.storage.items():
            self.ids.track.add_widget(Tracker(text=tracker, number=num, data=self.storage))

    def addWidget(self):
        text_input = self.ids.text_input.text
        num = '0'
        if text_input not in self.storage.keys():
            self.ids.track.add_widget(Tracker(text=text_input, number=num, data=self.storage))
            self.storage[text_input] = '0'
            self.ids.text_input.text = ''
            #self.saveData()


class Tracker(BoxLayout):
    def __init__(self, text='', number='', data={}, **kwargs):
        super().__init__(**kwargs)
        self.ids.label.text = text
        self.ids.count_add.text = number

Builder.load_string('''

<Trackers>:
    BoxLayout:
        orientation: 'vertical'
        ActionBar:
            height: 45
            size_hint_y: None
            background_image: ''
            background_color: rgba('#0B3242')
            ActionView:
                ActionPrevious:
                    title: '[b]TRACKERS[/b]'
                    font_size: 21
                    color: rgba('#AFB7BA')
                    markup: True
                    on_release: app.root.current = 'menu'
                ActionButton:
                    text: 'SEND'
                    color: rgba('#AFB7BA')
                    on_release: root.send()
        ScrollView:
            BoxLayout:
                id: track
                orientation: 'vertical'
                spacing: 5
                font_size: 15
                size_hint_y: None
                height: self.minimum_height
        BoxLayout:
            size_hint_y: None
            height: 45
            TextInput:
                id: text_input
                hint_text: 'Add Trackers'
                multiline: False
            Button:
                text: '+'
                size_hint_x: None
                width: 60
                on_release: root.addWidget()
                background_color: rgba('#1D7332')

<Tracker>:
    count_add: count_add
    size_hint_y: None
    height: 45
    padding: 20, 4, 20, 4

    canvas.before:
        Color:
            rgba: 1, 0, 0, 1
        Rectangle:
            pos: self.pos[0] + self.height/2, self.pos[1]
            size: self.size[0] - self.height, self.height
        Ellipse:
            pos: self.pos[0], self.pos[1]
            size: self.height, self.height
        Ellipse:
            pos: self.pos[0] + self.width - self.height, self.pos[1]
            size: self.height, self.height

    Button:
        text: '[b]X[/b]'
        markup: True
        size_hint_x: None
        width: 60
        on_release: app.root.get_screen('track').delete_storage(root)

    Label:
        id: label
        font_size: 20

    Label:
        id: count_add
        font_size: 20
        text: '0'

    Button:
        text: '[b]-[/b]'
        markup: True
        size_hint_x: None
        width: 60
        on_release: app.root.get_screen('track').subtract_num(root)

    Button:
        text: '[b]+[/b]'
        markup: True
        size_hint_x: None
        width: 60
        on_release: app.root.get_screen('track').add_num(root)
''')

class Pess(App):

    def build(self):
        Config.set('graphics', 'width', '600')
        Config.set('graphics', 'height', '800')
        from kivy.core.window import Window
        Window.clearcolor = get_color_from_hex('#262829')

        # Don't have `ScreenGenerator` so just set up `ScreenManager`
        sm = ScreenManager()
        sm.add_widget(Trackers(name='trackers'))
        return sm

        #return ScreenGenerator()

Pess().run()