画布未正确对齐答案

【问题标题】：Canvas is not getting aligned correctly画布未正确对齐
【发布时间】：2021-01-14 13:57:04
【问题描述】：

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

Kivy 代码

<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 = ''

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

【问题讨论】：

标签： python kivy kivymd

【解决方案1】：

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

您可以通过为消息定义一个类来利用 kivy 为您提供的自动绑定。可能是这样的：

class ChatMessage(MDLabel):
    pass

然后在kv中为该类添加规则：

<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 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 的大小和位置。

【讨论】：