具有动态网格布局的 Kivy 模板

问题描述

我正在尝试为布局创建一个模板，如下所示:

I'm trying to create a template for a layout which looks like the following:

|----------|
|          | 
| IMAGE    |   <--- Just an image (square)
|          |
|----------| 
|[btn][btn]|   <--- GridLayout cols=2 of buttons 
|[btn][btn]| 
|[btn][btn]| 
|[btn][btn]| 
|[btn][btn]| 
|[btn][btn]|
|----------|

第一部分很简单(但我可能错了，因为我是 kivy 的新手)

the first part is easy (but I could be wrong, as I'm very new at kivy)

#:kivy 1.6
[SideBar@BoxLayout]:
    orientation: 'vertical'
    Image:
        source: ctx.image
        size_hint: (1, None)
        height: root.width
    GridLayout:
        cols: 2
        # What do I do here to make it easy to load a list of buttons?

推荐答案

#!/usr/bin/env python2
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button

Builder.load_string('''
#:kivy 1.6
[SideBar@BoxLayout]:
    content: content
    orientation: 'vertical'
    size_hint: ctx.size_hint if hasattr(ctx, 'size_hint') else (1, 1)
    Image:
        source: ctx.image
        size_hint: (1, None)
        height: root.width
    GridLayout:
        cols: 2
        # just add a id that can be accessed later on
        id: content

<Root>:
    Button:
        center_x: root.center_x
        text: 'press to add_widgets'
        size_hint: .2, .2
        on_press:
            # what comes after `:` is basically normal python code
            sb.content.clear_widgets()
            # however using a callback that you can control in python
            # gives you more control
            root.load_content(sb.content)
    SideBar:
        id: sb
        size_hint: .2, 1
        image: 'data/images/image-loading.gif'
''')

class Root(FloatLayout):

    def load_content(self, content):
        for but in range(20):
            content.add_widget(Button(
                                text=str(but)))

class MyApp(App):
    def build(self):
        return Root()

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

我希望内联注释使示例足够清晰.在这种情况下，我们只是将内容的 ref 传递给将小部件添加到内容的函数.

I hope the inline comments make the example clear enough. In this case we are just passing the ref of the content to the function that adds widgets to the content.

在某些情况下，您可能希望访问 Widget 作为您自己类的属性.在这种情况下，您可以使用以下 方法.

There are situations where you might want to have access to the Widget as a attribute of your own class. In that case you can Use the following method.

上面的方法基本上是加了一个ObjectProperty的与 id 同名，将 id 所引用的小部件的引用传递给它.因此，您现在拥有一个与 python 类中的 id 同名的属性，以便于访问.使用上述方法，您的代码将如下所示.

The method above basically adds a ObjectProperty of the same name as the id, passes the reference of the widget referenced to by the id to it. So you, now have a attribute with the same name as the id in your python class for easy access. Using the above mentioned method your code would look something like this.

#!/usr/bin/env python2
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.properties import ObjectProperty

Builder.load_string('''
#:kivy 1.6
[SideBar@BoxLayout]:
    content: content
    orientation: 'vertical'
    size_hint: ctx.size_hint if hasattr(ctx, 'size_hint') else (1, 1)
    Image:
        source: ctx.image
        size_hint: (1, None)
        height: root.width
    GridLayout:
        cols: 2
        # just add a id that can be accessed later on
        id: content

<Root>:
    content: sb.content
    Button:
        center_x: root.center_x
        text: 'press to add_widgets'
        size_hint: .2, .2
        on_press:
            sb.content.clear_widgets()
            root.load_content()
    SideBar:
        id: sb
        size_hint: .2, 1
        image: 'data/images/image-loading.gif'
''')

class Root(FloatLayout):

    content = ObjectProperty(None)
    '''This is initialised to None and in kv code at line 28
    above (the one with `content: sb.content`) a ref to the
    actual content is passed'''

    def load_content(self):
        content = self.content
        for but in range(20):
            content.add_widget(Button(
                                text=str(but)))

class MyApp(App):
    def build(self):
        return Root()

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

这篇关于具有动态网格布局的 Kivy 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！