Kivy - 創建一個可縮放的滾動視圖

Question

我想創建一個滾動視圖，我通過下拉菜單選擇一個選項，然後按+按鈕將一行中的兩個標籤添加到滾動視圖。這是我的代碼到目前爲止：

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() 

在scrollview中的白色食物和卡路里標籤是例子。理想情況下，他們將浮動到頂部，然後我可以從下拉列表中選擇一個新選項，並將更多內容添加到隊列中。我將如何去做這件事？目前，如果我添加了很多在scrollview中堆疊的標籤，則不會啓用滾動。

Answer 1

要創建一個項目，以適應兩列，food和calories這將是可能是最好的，從表格的標題，即Food和Calories併爲他們創建一個單獨的容器作爲FoodItem，這就是「複製」行爲只是一個BoxLayout。

這FoodItem將有兩個StringProperties：

• 食品
• 卡路里

，您可以通過root.food，root.calories訪問這些千伏。

現在要直接在kv中創建這樣的項目並將其放入ScrollView，您需要Factory，因此默認情況下不可用，因此需要導入。與你基本上可以這樣做：

Factory.MyWidget() 

，它會創建窗口小部件，你需要傳遞給你的GridLayout的add_widget方法的一個實例。

編輯代碼：

... 
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('') 

... 

還要考慮使用的純DropdownSpinner，而不是因爲它使事情變得更容易（你會避免on_parent行爲）。