在 Kivy 中使用 RecycleView 的自定义小部件的对齐问题

Posted 2023-04-14

【中文标题】在 Kivy 中使用 RecycleView 的自定义小部件的对齐问题

【英文标题】：Alignment problems with custom widget using RecycleView in Kivy

【发布时间】：2018-08-03 16:40:52

【问题描述】：

因此，我使用 Kivy 的 RecycleView 实例化自定义小部件（名为“Row”）制作了类似聊天应用程序的结构，并且我希望将值传递给它。

如果 Row 自定义小部件只包含一个 Label 子组件，它工作正常，当我添加一个 Image 和一个 Button（我将在几秒钟内解释原因）时，存在奇怪的间距和定位问题 这不应该存在，因为我正在使用 BoxLayout 并且尝试了适当的 size_hint: 和 height: 技术来让它们看起来正确。

相关KV代码：

<Row@BoxLayout>:
    orientation: 'vertical'
    text: ''
    source: 'res/icon.png'
    buttontext: ''
    Label:
        markup: True
        text_size: self.size
        text: root.text
    Image:
        size: self.size
        source: root.source
        allow_stretch: True
    Button:
        text: root.buttontext #contains a link
        on_press: app.root.stuff(self.text) #opens that link

# Relevant Screen where I am using the RecycleView
<ChatBotScreen>
    BoxLayout:
        ti_userinput: ti_userinput
        orientation: 'vertical'
        ScrollView:
            size_hint_y: 85
            RecycleView:
                id: chatbase_list
                viewclass: 'Row'
                data: []
                RecycleBoxLayout:
                    padding: "15dp", "45dp", "15dp", "15dp"
                    default_size: None, dp(25)
                    default_size_hint: 1, None
                    size_hint_y: None
                    height: self.minimum_height
                    orientation: 'vertical'

        TextInput:
            size_hint_y: None
            height: "40dp"
            id: ti_userinput
            multiline: False
            on_text_validate: root.on_user_enter_text()

由于我的自定义小部件 Row 正在扩展 BoxLayout 并且我使用垂直方向，为什么子小部件（标签、图像和按钮）没有重叠？

这是我用来在 RecycleView 中传递数据的类和函数

    class ChatBotScreen(Screen):
        nickname = StringProperty()
        rvList = []

        def display_bot_output(self, botOutput):
            # Initialize an empty dictionary
            tempDict = 
            textToDisplay = '' + botOutput

            # Update the dictionary with properties:values and then pass it as a list to RecycleView's data
            tempDict.update('text':textToDisplay, 'buttontext':'https://google.com')
            self.rvList.append(tempDict)
            self.ids.chatbase_list.data = self.rvList

我希望在屏幕上显示的是：

我通过Label中的textToDisplay变量发送的文本

在标签下方，应该显示我可以通过的来源的图像，如果没有通过，则不显示图像

在图片下方，应该显示一个带有链接的按钮，我通过buttontext，如果没有通过，则不应显示任何按钮。

我可以渲染所有内容，但间距和所有内容都搞砸了。

截图如下：

这里我首先发送的数据只有标签文本信息和图像，因此按钮文本是空的（它仍然显示），然后我发送另一个带有标签文本信息、图像和按钮的数据（第二行小部件）文本（这是谷歌链接）。

非常感谢提供任何帮助。谢谢！

【问题讨论】：

我找到了罪魁祸首。它实际上是 RecycleBoxLayout 中的行。它正在设置 default_size: None, dp(25)。 25dp 就是问题所在。

【参考方案1】：

<ChatBotScreen>
    BoxLayout:
       ti_userinput: ti_userinput
       orientation: 'vertical'
       ScrollView:
       # to have the screen get bigger not lliek what you have
           size: root.size
           RecycleView:
               id: chatbase_list
               viewclass: 'Row'
               data: []
               RecycleBoxLayout:
                    padding: "15dp", "45dp", "15dp", "15dp"
                    default_size: None, dp(25)
                    default_size_hint: 1, None
                    size_hint_y: None
                    height: self.minimum_height
                    # add this so you can scroll
                    row_default_height: 60
                    orientation: 'vertical'

    TextInput:
        size_hint_y: None
        height: "40dp"
        id: ti_userinput
        multiline: False
        on_text_validate: root.on_user_enter_text()