KivyMD の NavigationDrawer に RecycleView を追加するサンプル
引き続き、Kivy です。
今回は、KivyMD の NavigationDrawer の中に RecycleView を突っ込んでみます。Kivy / KivyMD はここのコンポーネントを動作確認する分には特別難しいことはありませんが、複数組み合わせるとトタンになかなかいい感じに配置することができないのが難点だと思う。（自分の理解の浅さのせいかもしれないが、HTML/CSS の方がまだましに感じます。）
提示するサンプルを実行するとこんな感じになります。前回と同じように Appbar が画面上部にあり、 Appbar のアイコンを押すと、NavigationDrawer が表示されます。その NavigationDrawer の中に 果物の名前のリストを表示しています。
Appbar のアイコンが左で、ドロワーが右から出てくるのは違和感があるかもしれませんが anchor の確認のためにあえて行っています。
環境
- Kivy 2.3.0
- KiｖyMD 2.0.1.dev
コード
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.recycleview import MDRecycleView
KV = '''
MDScreen:
MDNavigationLayout:
# size_hint_x: 1
ScreenManager:
MDScreen:
MDBoxLayout:
md_bg_color: self.theme_cls.secondaryContainerColor
orientation:'vertical'
MDTopAppBar:
MDTopAppBarLeadingButtonContainer:
MDActionTopAppBarButton:
icon: 'menu'
on_release: nav_drawer.set_state('toggle')
MDTopAppBarTitle:
text: 'this is AppBar'
pos_hint: {'center_x': .5}
MDLabel:
text: "I'm MDLabel"
MDNavigationDrawer:
anchor: 'right'
MDBoxLayout:
orientation: 'vertical'
MDNavigationDrawerLabel:
text: 'drawer items!!'
icon: 'format-list-bulleted'
MDNavigationDrawerDivider:
NvDrawerRecycleItem:
id: rv
padding: 0, nav_drawer.height, 0, 0
viewclass: 'Food'
RecycleBoxLayout:
size_hint: (1, None)
height: self.minimum_height
orientation:'vertical'
<NvDrawerRecycleItem>:
<Food>:
text: 'name: {}'.format(self.item)
adaptive_size: True
padding: 0, dp(16), 0, dp(16)
'''
class Food(MDLabel):
item = StringProperty('')
class NvDrawerRecycleItem(MDRecycleView):
pass
class TestNavigationDrawer(MDApp):
def build(self):
self.theme_cls.theme_style = 'Dark' # or 'Light'
return Builder.load_string(KV)
def on_start(self):
rv = self.root.ids.rv
rv.data = (
{ 'item': it }
for it in [
'Apple', 'Banana', 'Cherry', 'Grape', 'Lemon',
'Mikan', 'Orange', 'Pear', 'Lychee', 'Strawberry',
'Peach', 'Fig'
]
)
TestNavigationDrawer().run()公式のサンプルでは MDNavigationDrawerMenu の中に Drawer の中身を入れてるのですが、そうすると RecycleView と MDNavigationDrawerMenu の間に大きな隙間ができてしまい。どうしても制御することができませんでした。
また、MDBoxLayout: orientation: ‘vertical’ で囲ってあげないと ドロワー系のアイテムと RecycleView が横並びになってしまいました。
そのため、上のようなサンプルコードになりました。
MDNavigationDrawer:
id: nav_drawer
anchor: 'right'
MDBoxLayout:
orientation: 'vertical'
MDNavigationDrawerMenul:
MDNavigationDrawerLabel:
text: 'drawer items!!'
icon: 'format-list-bulleted'
MDNavigationDrawerDivider:
NvDrawerRecycleItem:
id: rv
padding: 0, nav_drawer.height, 0, 0
viewclass: 'Food'
RecycleBoxLayout:
size_hint: (1, None)
height: self.minimum_height
orientation:'vertical'
今作りたいものをやるのにドロワーの中にリスト入れればいけるんじゃね？と安直に考えてやってみたがなかなかしんどかった。Kivy の道はきびしい。
