Kivy 侧边栏加内容布局答案

【问题标题】：Kivy Sidebar plus content layoutKivy 侧边栏加内容布局
【发布时间】：2019-02-24 19:44:10
【问题描述】：

我想在我的 kivy 应用程序上设置一个固定宽度的右侧边栏，其中包含按钮列表和绘制内容的主要区域，我不确定哪种方法是正确的（即哪种布局），这就是我的位置到目前为止：

layoutApp.py...

from kivy.app import App

class layoutApp(App):
    pass

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

还有 layoutApp.kv...

BoxLayout:
    orientation: 'vertical'
    BoxLayout:
        Button:
            size_hint_x: 2
        BoxLayout:
            orientation: 'vertical'
            size_hint_x: 0.5
            Button:
            Button:
            Button:
            Button:

产生：

问题在于尺寸是相对的，即右侧边栏宽度会根据屏幕占用/调整大小而变化，这不是预期的行为。

谢谢！

【问题讨论】：

标签： python kivy

【解决方案1】：

你可以设置侧边栏的宽度，然后通过ids来设置大按钮的宽度：

BoxLayout:
    id: top_box
    orientation: 'vertical'
    BoxLayout:
        Button:
            size_hint_x: None
            width: top_box.width - bottom_box.width
        BoxLayout:
            id: bottom_box
            orientation: 'vertical'
            size_hint_x: None
            width: 150
            Button:
            Button:
            Button:
            Button:

【讨论】：

【解决方案2】：

对@John_Anderson 稍作修改，顶部对齐的按钮很窄：

BoxLayout:
    id: top_box
    orientation: 'vertical'
    BoxLayout:
        Button:
            size_hint_x: None
            width: top_box.width - bottom_box.width
        BoxLayout:
            padding: 4
            id: bottom_box
            orientation: 'vertical'
            size_hint_x: None
            width: 200
            spacing: 2
            Button:
                id: button_1
                background_normal: ''
                background_color: .2, .2, .2, 1
                text: 'Button 1'
                color: .6, .6, .6, 1
                size_hint_x: None
                size_hint_y: None
                width: 192
                height: 40
            Button:
                id: button_2
                background_normal: ''
                background_color: .2, .2, .2, 1
                text: 'Button 2'
                color: .6, .6, .6, 1
                size_hint_x: None
                size_hint_y: None
                width: 192
                height: 40
            Button:
                id: button_3
                background_normal: ''
                background_color: .2, .2, .2, 1
                text: 'Button 3'
                color: .6, .6, .6, 1
                size_hint_x: None
                size_hint_y: None
                width: 192
                height: 40
            Button:
                id: button_4
                background_normal: ''
                background_color: .2, .2, .2, 1
                text: 'Button 4'
                color: .6, .6, .6, 1
                size_hint_x: None
                size_hint_y: None
                width: 192
                height: 40
            Widget:

结果：

【讨论】：