调整 GridLayout 中的复选框和标签对齐方式

问题描述 投票:0回答:1

我对 Kivy 比较陌生,在调整 GridLayout 中的复选框及其关联标签时遇到问题。参考下图...

Import Dialog with Grid Layout

在上面的屏幕截图中,有三个 GridLayout 小部件,其中包含复选框和标签,排列成 4 列。 我希望包含复选框的列变窄,包含标签的列可以分割剩余空间。

我的问题是:

  1. 第二列中的标签在水平方向上距离它们在第一列中描述的复选框相当远。 如何让它们更接近,就像第 3 列和第 4 列中的小部件一样?

  2. 复选框未与描述它们的标签垂直对齐。 如何垂直对齐这些小部件?

更新:我尝试向标签添加

height
(以匹配复选框)、
valign
padding
(0,0,0,0) 属性,但它没有丝毫改变垂直对齐方式.

  1. 我想要每个部分标题上方有一点空间,但我不知道如何在不进行大量手动计算和调整每个 GridLayout 高度的情况下做到这一点。因此,为了让 Kivy 弄清楚这一点,我添加了一个带有空标签的额外行。 有更好的方法吗?

  2. 从在线文档或演示程序中,我不清楚如何确定当用户单击“加载”时选择了哪些复选框(即单选按钮)。 我是否必须在应用程序中进行 id 搜索,通过 id 查找每个复选框,然后找出哪个是“True”? 或者有更好的办法吗?

这是我的 kivy 语言代码:

<ImportTypeDialog>:
    BoxLayout:
        orientation: "vertical"
        size: root.size
        pos: root.pos

        Label:
            text: '[i]Which type of data are you importing?[/i]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        Label:
            text: '[u][size=16]Customer-related items[/size][/u]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        GridLayout:
            cols: 4
            spacing: '8dp'
            size_hint_y: None
            CheckBox:
                id: chkBoxCustomerAddresses
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Addresses'
                text_size: self.width, None
                halign: 'left'
            CheckBox:
                id: chkBoxCustomerMessaging
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Electronic Messaging'
                text_size: self.width, None
                halign: 'left'
            CheckBox:
                id: chkBoxCustomerCommunications
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Communications'
                text_size: self.width, None
            CheckBox:
                id: chkBoxCustomerTransactions
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Transactions'
                text_size: self.width, None
            Label:
                text: ' '
                text_size: self.width, None

        Label:
            text: '[u][size=16]Supplier-related items[/size][/u]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        GridLayout:
            cols: 4
            spacing: '8dp'
            size_hint_y: None
            CheckBox:
                id: chkBoxSupplierAddresses
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Addresses'
                text_size: self.width, None
                halign: 'left'
            CheckBox:
                id: chkBoxSupplierMessaging
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Electronic Messaging'
                text_size: self.width, None
                halign: 'left'
            CheckBox:
                id: chkBoxSupplierCommunications
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Communications'
                text_size: self.width, None
            CheckBox:
                id: chkBoxSupplierTransactions
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Transactions'
                text_size: self.width, None
            Label:
                text: ' '
                text_size: self.width, None

        Label:
            text: '[u][size=16]Employee-related items[/size][/u]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        GridLayout:
            cols: 4
            spacing: '8dp'
            size_hint_y: None
            CheckBox:
                id: chkBoxEmployeeAddresses
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Addresses'
                text_size: self.width, None
                halign: 'left'
            CheckBox:
                id: chkBoxEmployeeMessaging
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Electronic Messaging'
                text_size: self.width, None
                halign: 'left'
            CheckBox:
                id: chkBoxEmployeeCommunications
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Communications'
                text_size: self.width, None
            CheckBox:
                id: chkBoxEmployeeTransactions
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Transactions'
                text_size: self.width, None
            Label:
                text: ' '
                text_size: self.width, None

        BoxLayout:
            orientation: "horizontal"
            size_hint_y: None
            height: 30
            Button:
                text: "Cancel"
                on_release: root.cancel()
            Button:
                text: "Load"
                on_release: app.ImportFile(filechooser.path, filechooser.selection)
python kivy-language grid-layout
1个回答
0
投票

通过使用这个 Kivy 语言代码,我能够获得几乎我想要的布局:

<ImportTypeDialog>:
    BoxLayout:
        orientation: "vertical"
        size: root.size
        pos: root.pos

        Label:
            text: '[i]Which type of data are you importing?[/i]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        Label:
            text: '[u][size=16]Customer-related items[/size][/u]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        GridLayout:
            cols: 4
            spacing: '8dp'
            size_hint_y: None
            CheckBox:
                id: chkBoxCustomerAddresses
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Addresses'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxCustomerMessaging
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Electronic Messaging'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxCustomerCommunications
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Communications'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxCustomerTransactions
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Transactions'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
                # padding: 0, 0, 0, 0

        Label:
            text: '[u][size=16]Supplier-related items[/size][/u]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        GridLayout:
            cols: 4
            spacing: '8dp'
            size_hint_y: None
            CheckBox:
                id: chkBoxSupplierAddresses
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Addresses'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxSupplierMessaging
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Electronic Messaging'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxSupplierCommunications
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Communications'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxSupplierTransactions
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Transactions'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'

        Label:
            text: '[u][size=16]Employee-related items[/size][/u]'
            markup: 'True'
            text_size: self.width, None
            size: self.texture_size
            halign: 'left'

        GridLayout:
            cols: 4
            spacing: '8dp'
            size_hint_y: None
            CheckBox:
                id: chkBoxEmployeeAddresses
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Addresses'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxEmployeeMessaging
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Electronic Messaging'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxEmployeeCommunications
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Communications'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'
            CheckBox:
                id: chkBoxEmployeeTransactions
                size_hint_y: None
                size_hint_x: None
                height: '14dp'
                width: '30dp'
                group: 'importTypes'
            Label:
                text: 'Transactions'
                text_size: self.width, None
                size_hint_y: None
                height: '18dp'
                halign: 'left'

        BoxLayout:
            orientation: "horizontal"
            size_hint_y: None
            height: 30
            Button:
                text: "Cancel"
                on_release: root.cancel()
            Button:
                text: "Load"
                on_release: app.ImportFile()

它有点长并且有点重复,但它在概念上非常简单且易于维护。 主要是,我必须向每个复选框标签添加

size_hint_y
height
。这解决了#2,并且神奇地解决了#1 和#3。 我仍然需要弄清楚#4,但这篇文章的要点是弄清楚布局。

© www.soinside.com 2019 - 2024. All rights reserved.