2017-04-03 7 views
0

드롭 다운 메뉴를 통해 옵션을 선택한 다음 + 버튼을 눌러 두 개의 라벨을 스크롤보기에 추가 할 수있는 scrollview를 만들려고합니다. 지금까지 내 코드 :Kivy - 확장 가능한 ScrollView 만들기

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

두 개의 열, foodcalories 아마 최고의 수 있습니다에 맞게 항목을 만드는 것입니다 헤더 FoodCalories을 즉와 FoodItem로에 대해 별도의 컨테이너를 만들 테이블에서 "복사"동작을에 단지 BoxLayout입니다.

FoodItem이있을 것이라는 점을 두 StringProperties :

  • 음식
  • 칼로리

하고 root.food, root.calories에 의해 KV에 액세스 할 수 있습니다.

이제 kv로 직접 항목을 만들고 ScrollView에 넣으려면 Factory이 필요합니다. 따라서 기본값은 사용할 수 없으므로 가져옵니다.

Factory.MyWidget() 

을하고 당신이 당신의 GridLayoutadd_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('') 

... 

은 또한 그것은 일을 더 쉽게 만들면서 순수한 Dropdown 대신 Spinner를 사용하는 것이 (그리고 당신이 on_parent 문제가 발생하지 않도록하겠습니다).

관련 문제