Canvas 没有正确对齐

Question

我正在尝试使用 kivy 和 kivymd 制作一个聊天应用程序，但我遇到了一个问题。我试图在标签小部件之前放置一个 canvas，但它没有正确对齐。请帮我解决这个问题。

基维密码

<ChatScreen>:
    GridLayout:
        cols: 1
        MDToolbar:
            title: 'My Room'
            anchor_title: 'center'
            left_action_items: [['menu', lambda x: x]]
            right_action_items: [['logout-variant', lambda x:x]]
        ScrollView:
            BoxLayout:
                id: chat_area
                orientation: 'vertical'
                size_hint: 1, 1
                canvas.before:
                    Color:
                        rgba: 0,0,0,0.2
                    Rectangle:
                        pos: self.pos
                        size: self.size
        Widget:
            id: separator
            size_hint: 1, 0.008
            pos_hint: {'center_x':0.5, 'center_y':0.5}
            canvas:
                Color:
                    rgba: 0,0,0,1
                Rectangle:
                    pos: 0, separator.center_y
                    size: separator.width, 1.5
        GridLayout:
            cols: 2
            size_hint: 1, 0.1
            TextInput:
                id: msg
                hint_text: 'Enter Message'
                background_color: 0,0,0,0  
                foreground_color: 0,0,0,1
            MDIconButton:
                icon: 'send'
                on_press: root.send_msg()

Python代码

class ChatScreen(Screen):
    def send_msg(self):
        msg = self.ids.msg.text
        if msg=='':
            pass
        else:
            label = MDLabel(
                text=msg,
                size_hint=(0.3, 1),
                pos_hint={'center_x': 0.7, 'center_y': 0.5}
                )
            with label.canvas.before:
                Color(0,1,0,0.7)
                RoundedRectangle(radius=[30,30,30,30], size=label.size, pos=label.pos)
            self.ids.chat_area.add_widget(label)
            self.ids.msg.text = ''

单击按钮时添加的标签的 canvas 相互堆叠。请帮忙。

Answer 1

你的RoundedRectangle不在正确位置的原因是你在创建MDLabel时设置了位置和大小，所以它使用默认值(0,0) 和 (100,100).

您可以通过为消息定义 class 来利用 kivy 为您提供的自动绑定。大概是这样的：

class ChatMessage(MDLabel):
    pass

然后在 kv 中为 class 添加规则：

<ChatMessage>:
    size_hint: (0.3, 1)
    pos_hint: {'center_x': 0.7, 'center_y': 0.5}
    canvas.before:
        Color:
            rgba: (0,1,0,0.7)
        RoundedRectangle:
            radius: [30,30,30,30]
            pos: self.pos
            size: self.size

并在您的 send_msg() 方法中使用新的 class：

class ChatScreen(Screen):
    def send_msg(self):
        msg = self.ids.msg.text
        if msg=='':
            pass
        else:
            label = ChatMessage(text=msg)
            self.ids.chat_area.add_widget(label)
            self.ids.msg.text = ''

现在 RoundedRectangle 将自动调整为 ChatMessage 的大小和位置。

Canvas 没有正确对齐

Canvas is not getting aligned correctly

python

kivy

kivymd