Kivy - 创建可扩展的ScrollView

时间:2017-04-03 21:59:17

标签: python scrollview kivy

我试图创建一个滚动视图,我通过下拉菜单选择一个选项,然后按+按钮将一行中的两个标签添加到滚动视图中。到目前为止,这是我的代码:

from kivy.app import App
from kivy.uix.label import Label
from kivy.lang import Builder
from kivy.properties import ListProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.dropdown import DropDown
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput

from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition

class CaloriesScreen(Screen):
    pass

class theScreenManager(ScreenManager):
    pass

root_widget = Builder.load_string('''
#:import FadeTransition kivy.uix.screenmanager.FadeTransition

theScreenManager:
    CaloriesScreen:

<CaloriesScreen>:
    name: 'calories'
    BoxLayout:
        orientation: 'vertical'

        BoxLayout:
            orientation: 'horizontal'
            size_hint: 1, .3
            Button:
                text: '<'
                size_hint: .1, 1
                font_size: 75
                background_normal: ""
                background_color: 0.18, .5, .92, 1
                on_release: app.root.current = 'main' 

            Label:
                text: 'Calories'
                halign: 'left'
                font_size: 50
                canvas.before:
                    Color:
                        rgb: 0.18, .5, .92
                    Rectangle:
                        pos: self.pos
                        size: self.size
            Widget:
                size_hint: .1, 1
                canvas.before:
                    Color:
                        rgb: 0.18, .5, .92
                    Rectangle:
                        pos: self.pos
                        size: self.size

        BoxLayout:
            orientation: 'horizontal'
            size_hint: 1, .4
            spacing: 50
            canvas.before:
                Color:
                    rgb: 0.8, 0.8, 0.8
                Rectangle:
                    pos: self.pos
                    size: self.size
            Label:
                text: 'Recipes'
                font_size: 30
                color: 0.18, .5, .92, 1


            Button:
                id: btn
                text: 'Select a recipe...'
                font_size: 30
                on_release: dropdown.open(self)
                height: '48dp'
                pos_hint: { 'top' : 0.75}
                size_hint: .8, .5

            DropDown:

                id: dropdown
                on_parent: self.dismiss()
                on_select: btn.text = '{}'.format(args[1])


                Button:
                    text: 'Simple Cheese Omelette'
                    size_hint_y: None
                    height: '48dp'
                    on_release: dropdown.select('First Item')

                Button:
                    text: 'Burger'
                    size_hint_y: None
                    height: '48dp'
                    on_release: dropdown.select('Second Item')

                Button:
                    text: 'Tomato and Caper Linguine'
                    size_hint_y: None
                    height: '48dp'
                    on_release: dropdown.select('Third Item')


            Button:
                text: '+'
                font_size: 30
                background_normal: ""
                background_color: 0.18, .5, .92, 1
                pos_hint: { 'top' : 0.65}
                size_hint: .1, .3
                #on_release:
            Widget:
                size_hint: .02, 1

        BoxLayout:
            orientation: 'horizontal'
            size_hint: 1, .2
            canvas.before:
                Color:
                    rgb: 0.18, .5, .92
                Rectangle:
                    pos: self.pos
                    size: self.size
            Label:
                text:'Food'
                color: (1, 1, 1, 1)
            Label:
                text:'Calories'
                color: (1, 1, 1, 1)

        ScrollView:
            scroll_timeout: 250
            scroll_distance: 20
            do_scroll_y: True
            do_scroll_x: False
            GridLayout:
                id: grid
                cols: 2
                spacing: 10
                padding: 10
                Label:
                    text:'Food'
                    color: (1, 1, 1, 1)
                Label:
                    text:'Calories'
                    color: (1, 1, 1, 1)


''')

class temprecipeapp(App):
    def build(self):
        return root_widget

if __name__ == "__main__":
    temprecipeapp().run()

滚动视图中的白色食物和卡路里标签就是例子。理想情况下,它们会浮动到顶部,然后我可以从下拉列表中选择一个新选项,并为队列添加更多选项。我该怎么做?目前,如果我在滚动视图中添加了大量标签,则滚动不会启用。

1 个答案:

答案 0 :(得分:1)

要创建一个适合两列的项目foodcalories,它可能是最好的#34;复制&#34;表标题中的行为,即FoodCalories,并为FoodItem创建一个单独的容器,这只是BoxLayout

FoodItem将有两个StringProperties

  • 食品
  • 卡路里

您可以通过root.foodroot.calories

以kv格式访问它们

现在直接在kv中创建这样的项目并将其放入ScrollView,您需要Factory,默认情况下不可用,因此导入。有了这个你基本上可以这样做:

Factory.MyWidget()

并且它会创建您的小部件的实例,您需要将其传递给GridLayout的{​​{1}}方法。

代码编辑:

add_widget

另外,请考虑使用Spinner代替纯... from kivy.properties import StringProperty ... root_widget = Builder.load_string(''' #:import FadeTransition kivy.uix.screenmanager.FadeTransition #:import Factory kivy.factory.Factory # <- import Factory ... DropDown: id: dropdown # on_parent: self.dismiss() <- don't do this on_select: btn.text = '{}'.format(args[1]) Button: text: 'Simple Cheese Omelette' size_hint_y: None height: '48dp' on_release: dropdown.select('First Item') Button: text: 'Burger' size_hint_y: None height: '48dp' on_release: dropdown.select('Second Item') Button: text: 'Tomato and Caper Linguine' size_hint_y: None height: '48dp' on_release: dropdown.select('Third Item') Button: text: '+' font_size: 30 background_normal: "" background_color: 0.18, .5, .92, 1 pos_hint: { 'top' : 0.65} size_hint: .1, .3 on_release: grid.add_widget(Factory.FoodItem(food=btn.text, calories='10')) <- add a new item ... ScrollView: scroll_timeout: 250 scroll_distance: 20 do_scroll_y: True do_scroll_x: False GridLayout: id: grid cols: 1 <- change cols size_hint_y: None height: self.minimum_height <- make the layout resize itself spacing: 10 padding: 10 <FoodItem>: size_hint_y: None height: 20 <- set a size for the item Label: text: root.food color: (1, 1, 1, 1) Label: text: root.calories color: (1, 1, 1, 1) ''') class FoodItem(BoxLayout): food = StringProperty('') calories = StringProperty('') ... ,因为它可以让事情变得更轻松(并且您将避免Dropdown行为)。