Kivy动态创建拆分单词按钮如何正确布局定位避免重叠

优先选BoxLayout实现，不需要用GridLayout，全程纯.py编写即可，完全不用手动计算按钮偏移量。

原代码核心问题 #

• 直接继承基础Widget作为容器，这类组件没有自动布局能力，所有子控件的位置、尺寸必须手动计算，你写死50px的固定偏移，只要按钮宽度不等于50就必然重叠
• destroy、create函数定义在__init__的循环内部，会出现作用域绑定错误，点击时容易触发索引异常
• 绑定texture_size修改按钮尺寸时，控件还没完成首次渲染，拿到的尺寸值不准，计算偏移自然出错

实现逻辑 #

• 根容器用垂直方向的BoxLayout，负责从上到下排列每一行内容，设置好内边距和行间距即可
• 每一行（对应一个原句子/拆分后的单词组）单独用一个水平方向的BoxLayout承载，设置合适的按钮间距
• 点击句子按钮时，先从当前行的水平布局中移除原句子按钮，再逐个往同一行里添加拆分后的单词按钮，BoxLayout会自动按顺序排列控件，不会出现重叠，根本不需要手动获取上一个按钮的宽度算坐标
• 所有按钮设置size_hint_x=None，让按钮宽度适配自身文本长度，不会自动拉伸占满整行

可直接运行的修正代码 #

from kivy.uix.button import Button
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

sentences = [
    'This is example sentence 1.',
    'This is example sentence 2.',
    'This is example sentence 3.',
    'This is example sentence 4.',
    'This is example sentence 5.',
    'This is example sentence 6.'
]
words = [
    ['This', 'is', 'example', 'sentence', '1'],
    ['This', 'is', 'example', 'sentence', '2'],
    ['This', 'is', 'example', 'sentence', '3'],
    ['This', 'is', 'example', 'sentence', '4'],
    ['This', 'is', 'example', 'sentence', '5'],
    ['This', 'is', 'example', 'sentence', '6']
]

class RootWidget(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.orientation = 'vertical'
        self.padding = 20
        self.spacing = 15

        for idx, sentence_text in enumerate(sentences):
            # 初始化单行水平布局
            row = BoxLayout(spacing=8, size_hint_y=None, height=40)
            # 创建原句子按钮
            sentence_btn = Button(
                text=sentence_text,
                size_hint_x=None,
                width=220
            )
            # 绑定点击拆分事件
            sentence_btn.bind(
                on_press=lambda btn, cur_row=row, word_set=words[idx]: self.split_to_words(btn, cur_row, word_set)
            )
            row.add_widget(sentence_btn)
            self.add_widget(row)

    def split_to_words(self, clicked_btn, cur_row, word_set):
        # 移除被点击的整句按钮
        cur_row.remove_widget(clicked_btn)
        # 逐个添加单词按钮
        for word_text in word_set:
            word_btn = Button(
                text=word_text,
                size_hint_x=None
            )
            # 宽度自适应文本，额外加20px作为左右内边距避免文字贴边
            word_btn.bind(
                texture_size=lambda ins, size: setattr(ins, 'width', size[0] + 20)
            )
            cur_row.add_widget(word_btn)

class SplitBtnApp(App):
    def build(self):
        return RootWidget()

if __name__ == "__main__":
    SplitBtnApp().run()

其他方案说明 #

如果一定要用GridLayout，把上述代码里的单行水平BoxLayout替换成GridLayout(cols=len(对应单词列表))即可，但针对这种水平自适应宽度排列的场景，BoxLayout写法更简单、性能更好。
如果坚持不用自动布局、手动计算坐标，需要等按钮完成首次渲染后（可以用Clock.schedule_once延迟1帧执行，或者给按钮绑定width变更事件）再读取按钮的实际width值，累加作为下一个按钮的x坐标，这种写法维护成本很高，不推荐使用。

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