Kivy按钮文本对齐问题

Question

我正在尝试在 Kivy 中开发一个电子邮件应用程序，基本上只是作为学习框架的进出的练习......我正在尝试创建初始窗口并且遇到了一个绊脚石！这个想法是，它只会在收件箱中显示一个电子邮件列表，就像移动设备上的任何基本电子邮件应用程序一样。

我遇到的问题是我无法弄清楚如何让每个列表项（这只是一个按钮）的文本正确对齐。在我的按钮中使用“halign='left'”将使文本左对齐，但仅相对于每个按钮；它仍然位于每个按钮的中心。

我的实际应用程序有点大，所以这是我从一个股票 Kivy 示例中制作的一个快速而肮脏的示例。 （我意识到这段代码并不完美......就像我说的快速和肮脏的例子......但它确实有效！）如您所见，每个按钮上的两行文本与每个按钮对齐其他，但它们并不完全一致。谁能建议我如何使所有文本在每个按钮左侧 10 像素处对齐？ 我确实在 StackOverflow 上找到了一个相关的听起来项目，但它并没有真正回答这个问题，例如，它似乎更多地处理在按钮上使用图像。我是 Kivy 的新手，但我已经阅读了教程和文档，并在 Google 上进行了广泛的搜索 - 所以任何帮助都将不胜感激！

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

Button 的文档以“A Button is a Label”开头。即使对于没有明确提及其血统的Widgets，您也应该记下相关小部件的API doc 中的第二行。在这种情况下，“基础：kivy.uix.label.Label”。

这确定按钮继承自标签。 （我明确提到这一点是因为这部分查看基类的继承属性有时对每个人来说都不是直观的）。

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

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

b) 小于widget的大小（你要找的）text_size: self.width - dp(10), self.height - dp(10)

c) 一侧不受约束text_size: self.width, None

d) 或两者都有text_size: None, None

e) 或受限于不同的 Widget text_size: other_button.size

使用text_size的原因是为了给用户更多的控制权。 你还应该看看textalign example

Answer 2

您需要设置text_size 属性，例如：

btn.text_size = (290, 40)

Answer 3

如果你想避免text.size 中的数字，那么试试这个：

text_size: self.size

Answer 4

正如 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