Kivy：调整按钮大小以适应下拉列表中的包装文本

Posted 2023-04-14

【中文标题】Kivy：调整按钮大小以适应下拉列表中的包装文本

【英文标题】：Kivy: Sizing Buttons to fit wrapped text within dropdown

【发布时间】：2018-10-29 04:30:56

【问题描述】：

我在构建 Kivy 下拉菜单并为文本启用自动换行时遇到问题，这样按钮小部件的大小会相应地适应全文。

我已遵循以下堆栈溢出线程的指导以及也链接的类似博客文章。

Wrapping the text of a Kivy Label

https://blog.kivy.org/2014/07/wrapping-text-in-kivys-label/

文本按预期换行，但是随着文本字符串变长，在呈现按钮时，文本上方和下方的“填充”量会增加。我不确定是什么原因造成的，想消除这种影响。

更新：（编辑代码以更简洁地解决问题。编辑图像以匹配）

“额外填充”与文本长度无关，而是与添加到下拉列表中的循环索引和/或小部件计数有关。

进一步编辑这行代码：

btn2 = WrapButton(text=('|' + str('long text..is long...%d' % (21-index) * index) + '|') , size_hint=(1,None))

收件人：

btn2 = WrapButton(text=('|' + str('long text..is long...%d' % (21-index) * index) + '|') , size_hint=(None,None),width=700)

(设置 size_hint=(none,none) 而不是 (1,none) 并添加 width=700)

消除问题。我无法理解导致这种行为的原因。编辑后的代码失去了按钮的自动宽度大小，我无法想象宽度 size_hint 是如何导致垂直“填充”的。

显示问题的屏幕截图

这段代码演示了这个问题：

from kivy.uix.button import Button
from kivy.uix.dropdown import DropDown
from kivy.uix.boxlayout import BoxLayout
from kivy.base import runTouchApp
from kivy.lang import Builder

Builder.load_string('''
<WrapButton>:
    halign: "center"
    valign: "center"
    font_size: 20
    size_hint_y: None
    text_size : self.size
    height: self.texture_size[1]
''')

class WrapButton(Button):
    pass

dropdown2 = DropDown()

layout = BoxLayout(padding=0,orientation='vertical')

mainbutton2 = WrapButton(text='Select...', size_hint=(1, None),height=95,pos_hint='center_x': .5, 'center_y': 0)
mainbutton2.bind(on_release=dropdown2.open)
layout.add_widget(mainbutton2)

for index in range(20):
    btn2 = WrapButton(text=('|' + str('long text..is long...%d' % (21-index) * index) + '|') , size_hint=(1,None))
    btn2.bind(on_release=lambda btn2: dropdown2.select(btn2.text))
    dropdown2.add_widget(btn2)

dropdown2.bind(on_select=lambda instance, x: setattr(mainbutton2, 'text', x))

runTouchApp(layout)

截图

更新： 下面接受的答案会导致 android 上出现伪影。我正在努力在其他设备上进行测试以排除设备本身。社区的任何意见将不胜感激！

Artifacts..broken Kivy install?

【参考方案1】：

解决方案是将text_size : self.size 替换为text_size : self.width, None。有关详细信息，请参阅示例和输出。

示例

main.py

​​>

from kivy.uix.button import Button
from kivy.uix.dropdown import DropDown
from kivy.uix.boxlayout import BoxLayout
from kivy.base import runTouchApp
from kivy.lang import Builder

Builder.load_string('''
<WrapButton>:
    halign: "center"
    valign: "center"
    font_size: 20
    size_hint_y: None
    text_size : self.width, None
    height: self.texture_size[1]
''')


class WrapButton(Button):
    pass


dropdown2 = DropDown()

layout = BoxLayout(padding=0, orientation='vertical')

mainbutton2 = WrapButton(text='Select...', size_hint=(1, None), height=95, pos_hint='center_x': .5, 'center_y': 0)
mainbutton2.bind(on_release=dropdown2.open)
layout.add_widget(mainbutton2)

for index in range(20):
    btn2 = WrapButton(text=('|' + str('long text..is long...%d' % (21-index) * index) + '|'), size_hint=(1, None))
    btn2.bind(on_release=lambda btn2: dropdown2.select(btn2.text))
    dropdown2.add_widget(btn2)

dropdown2.bind(on_select=lambda instance, x: setattr(mainbutton2, 'text', x))

runTouchApp(layout)

输出

【讨论】：

感谢 ikolim！我目前正在测试这个解决方案。它似乎确实适用于示例代码。但是，我将它移植到我的完整代码库中，并且现在看到文本垂直溢出按钮的情况。如果我继续看到这个，我需要确保一切都是相同的并提供更新的示例代码。否则，我会将其标记为正确的解决方案。

再次感谢，一旦我将代码库与我提供的示例代码保持一致，这将按预期工作。

此解决方案会导致 Android 上出现伪影。我将编辑问题并添加屏幕截图。