Kivy按钮文本对齐问题

Question

我正在尝试用Kivy开发一个电子邮件应用，主要是为了练习，了解这个框架的各种功能。我想创建一个初始窗口，但遇到了一些困难！我的想法是，它会像手机上的基本电子邮件应用一样，简单地显示收件箱中的电子邮件列表。

我遇到的问题是，我不知道怎么让每个列表项（其实就是一个按钮）的文本对齐。虽然我在按钮中使用了“halign='left'”，这会让文本向左对齐，但这只是相对于每个按钮而言；文本在每个按钮内还是居中的。

我的实际应用程序有点大，不方便贴出来，所以我从一个Kivy的示例中快速做了一个简单的例子。（我知道这段代码并不完美……就像我说的那样，是为了举例而快速做的……不过它确实能工作！）所以你可以看到，每个按钮上的两行文本是对齐的，但整体上它们并没有完全对齐。有没有人能建议我怎么做才能让所有文本在每个按钮的左侧，比如说距离左边10像素的位置对齐呢？我在StackOverflow上找到过一个相关的内容，但它并没有真正回答我的问题，似乎更多是关于在按钮上使用图片。我是Kivy的新手，虽然我看过教程和文档，也在谷歌上搜索过很多信息，所以任何帮助都将非常感激！

import kivy
kivy.require('1.0.8')

from kivy.app import App
from kivy.core.window import Window
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.uix.gridlayout import GridLayout

import random


class ScrollViewApp(App):

    def build(self):
        # create a default grid layout with custom width/height
        layout = GridLayout(cols=1, spacing=10, size_hint=(None, None),
                            width=Window.width)

        # when we add children to the grid layout, its size doesn't change at
        # all. we need to ensure that the height will be the minimum required to
        # contain all the childs. (otherwise, we'll child outside the bounding
        # box of the childs)
        layout.bind(minimum_height=layout.setter('height'))

        # add button into that grid
        for i in range(30):
            btn = Button(text=str(i * random.random()) + '\n' + str(i * random.random()),
                         size=(300, 40),
                         size_hint=(None, None),
                         halign='left')
            layout.add_widget(btn)

        # create a scroll view, with a size < size of the grid
        root = ScrollView(size_hint=(None, None))
        root.size = (Window.width, Window.height)
        root.center = Window.center
        root.add_widget(layout)

        return root

if __name__ == '__main__':

    ScrollViewApp().run()

Answer 1

正如qua-non所解释的，按钮其实就是一个标签，所以你可以参考标签的属性来实现这个功能。因为我没有看到太多相关的内容，所以我想分享一小段代码，帮助其他程序员。
我会展示如何制作一个带标签的按钮，并调整里面的文字。

#disable multi-touch emulation
from kivy.config import Config
Config.set('input', 'mouse', 'mouse,multitouch_on_demand')
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.image import Image   
#--------------------------------------------------------------------
Builder.load_string("""
<RootWidget>:
  BoxLayout:
    orientation: 'vertical'
    padding: "10dp"

    BoxLayout:
      size_hint_y: 3
      Widget: # to fill the line from left

      Button:
        text: "Button"
        font_size: 40
        text_size: self.size     
        halign: 'center'
        valign: 'bottom'
        padding_y: 10

        #Adding Image you can comment this part    
        Image:
          source: 'img/calender1.png'
          center_x: self.parent.center_x
          center_y: self.parent.center_y +10

      Widget:# to fill the line from right

    BoxLayout:
      size_hint_y: 10    

""")
#-----------------------------------------------------------------------
class RootWidget(BoxLayout):
  pass

#-----------------------------------------------------------------------    
class MyApp(App):
    def build(self):
      return RootWidget()


if __name__ == '__main__':
    MyApp().run()

主要的部分在按钮里。你可以调整字体、对齐方式和内边距，以达到你想要的效果。

Button:
    text: "Button"
    font_size: 40
    text_size: self.size     
    halign: 'center'
    valign: 'bottom'
    padding_y: 10

Answer 2

你需要设置一下 text_size 这个属性，像这样：

btn.text_size = (290, 40)

Answer 3

Button的文档开头提到“按钮就是一个标签”。即使是那些没有明确提到自己来源的小部件，你也应该注意到在相关小部件的API文档中的第二行。在这个例子中是“基类：kivy.uix.label.Label”。

这说明按钮是从标签（Label）继承而来的。（我特别提到这一点，因为查看基类的继承属性对每个人来说有时并不直观）。

如果你查看标签的文档，特别是halign属性，它会告诉你要使用text_size来实现正确的文本对齐。这意味着文本是在一个由text_size属性设置的边界框内对齐的。这个属性可以设置为：

a) 小部件的大小。text_size: self.size

b) 小于小部件的大小（这是你想要的）text_size: self.width - dp(10), self.height - dp(10)

c) 一侧没有限制text_size: self.width, None

d) 或者两侧都没有限制text_size: None, None

e) 或者限制在另一个小部件上text_size: other_button.size

使用text_size的原因是为了给用户更多的控制权。你还应该查看文本对齐示例。