Kivy自定义可滚动Label组件文本锚定底部异常求助

你的聊天界面文本漂浮问题主要由细节错误和UI更新时机问题导致，以下是具体修复步骤和修正后的完整代码：

核心问题分析 #

1. 拼写错误：代码中self.chat_history.tet_size是笔误，应为text_size，导致文本尺寸未正确更新，引发布局混乱。
2. 文本对齐缺失：chat_history标签未设置valign='top'，文本高度变化时会出现位置偏移。
3. 滚动触发时机不对：scroll_to调用时布局尚未完成更新，导致滚动未生效。

修复步骤 #

• 修正tet_size为text_size。
• 给chat_history添加valign='top'属性，确保文本从顶部开始排列。
• 使用Clock.schedule_once延迟调用scroll_to，等待UI布局更新完成后再执行滚动操作。
• 优化text_size的绑定逻辑，确保宽度始终适配容器。

修正后的完整代码 #

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label  
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.uix.scrollview import ScrollView
from kivy.clock import Clock
          
Window.size = (500, 500)

class ScrollableLabel(ScrollView):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.layout = GridLayout(cols=1, size_hint_y=None)
        self.add_widget(self.layout)

        # 添加valign='top'确保文本从顶部排列
        self.chat_history = Label(size_hint_y=None, markup=True, halign='left', valign='top', text_size=(None, None))
        # 绑定宽度时直接设置text_size为当前宽度的0.98，避免重复计算
        self.chat_history.bind(width=lambda s, w: s.setter('text_size')(s, (w * 0.98, None)))

        self.scroll_to_point = Label(size_hint_y=None, height=1)

        self.layout.add_widget(self.chat_history)
        self.layout.add_widget(self.scroll_to_point)
    
    def update_chat_history(self, message):
        self.chat_history.text += '\n' + message
        # 更新标签高度为文本实际高度
        self.chat_history.height = self.chat_history.texture_size[1]
        # 更新布局高度，预留一点间距
        self.layout.height = self.chat_history.height + 15

        # 延迟调用scroll_to，确保布局更新完成
        Clock.schedule_once(lambda dt: self.scroll_to(self.scroll_to_point), 0.01)
    
class Example(App):
    def build(self):
        layout = GridLayout(cols=1,  
                            row_default_height=40,
                            spacing = 10,
                            padding = 10,
                            )
        secondLayout = GridLayout(cols=2, row_force_default=True, row_default_height=40,
                            spacing = 10,
                            )
        self.new_message = TextInput(width=Window.size[0]*0.8,size_hint_x=None, multiline=False)
        submit = Button(text="submit", on_press=self.send_message)
        self.history = ScrollableLabel(height=Window.size[1]*0.9, size_hint_y=None)
        layout.add_widget(self.history)
        secondLayout.add_widget(self.new_message)
        secondLayout.add_widget(submit)
        layout.add_widget(secondLayout)

        initial_messages = ["Hello!", "How are you?", "Test message"]
        for message in initial_messages:
            self.incoming_message(message)
        Clock.schedule_once(self.focus_text_input, 1)

        layout.bind(size=self.adjust_fields)

        return layout
    
    def adjust_fields(self, *_):
        if Window.size[1]*0.1 < 50:
            new_height=Window.size[1]-50
        else:
            new_height=Window.size[1]*0.9
        self.history.height=new_height

        if Window.size[0]*0.2 < 160:
            new_width=Window.size[0]-160
        else:
            new_width=Window.size[0]*0.8
        self.new_message.width=new_width
    
    def send_message(self, _):
        message = self.new_message.text
        self.new_message.text=""
        if message:
            self.history.update_chat_history(f"[color=dd2020]You[/color] > {message}")
    
    def focus_text_input(self,_):
        self.new_message.focus = True

    def incoming_message(self, message):
        self.history.update_chat_history(f"[color=20dd20]PowerBot[/color] > {message}")
    
Example().run()

额外说明 #

• 延迟调用scroll_to是因为Kivy的UI更新是异步的，直接调用可能会在布局尺寸尚未更新时执行，导致滚动位置不准确。
• 设置valign='top'后，文本会始终从标签顶部开始渲染，避免高度变化时出现文本漂浮的情况。

内容的提问来源于stack exchange，提问作者Joe Parker