{"id":678,"date":"2024-10-06T10:08:00","date_gmt":"2024-10-06T01:08:00","guid":{"rendered":"https:\/\/txn.myds.me\/blog\/?p=678"},"modified":"2024-10-06T10:08:00","modified_gmt":"2024-10-06T01:08:00","slug":"kivymd-%e3%81%ae-navigationdrawer-%e3%81%ab-recycleview-%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab","status":"publish","type":"post","link":"https:\/\/blog.txn.red\/?p=678","title":{"rendered":"KivyMD \u306e NavigationDrawer \u306b RecycleView \u3092\u8ffd\u52a0\u3059\u308b\u30b5\u30f3\u30d7\u30eb"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u5f15\u304d\u7d9a\u304d\u3001Kivy \u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u3001KivyMD \u306e NavigationDrawer \u306e\u4e2d\u306b RecycleView \u3092\u7a81\u3063\u8fbc\u3093\u3067\u307f\u307e\u3059\u3002Kivy \/ KivyMD \u306f\u3053\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u52d5\u4f5c\u78ba\u8a8d\u3059\u308b\u5206\u306b\u306f\u7279\u5225\u96e3\u3057\u3044\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u8907\u6570\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u30c8\u30bf\u30f3\u306b\u306a\u304b\u306a\u304b\u3044\u3044\u611f\u3058\u306b\u914d\u7f6e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u306a\u3044\u306e\u304c\u96e3\u70b9\u3060\u3068\u601d\u3046\u3002\uff08\u81ea\u5206\u306e\u7406\u89e3\u306e\u6d45\u3055\u306e\u305b\u3044\u304b\u3082\u3057\u308c\u306a\u3044\u304c\u3001HTML\/CSS \u306e\u65b9\u304c\u307e\u3060\u307e\u3057\u306b\u611f\u3058\u307e\u3059\u3002\uff09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u63d0\u793a\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u5b9f\u884c\u3059\u308b\u3068\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3059\u3002\u524d\u56de\u3068\u540c\u3058\u3088\u3046\u306b Appbar \u304c\u753b\u9762\u4e0a\u90e8\u306b\u3042\u308a\u3001 Appbar \u306e\u30a2\u30a4\u30b3\u30f3\u3092\u62bc\u3059\u3068\u3001NavigationDrawer  \u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u305d\u306e NavigationDrawer \u306e\u4e2d\u306b \u679c\u7269\u306e\u540d\u524d\u306e\u30ea\u30b9\u30c8\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Appbar \u306e\u30a2\u30a4\u30b3\u30f3\u304c\u5de6\u3067\u3001\u30c9\u30ed\u30ef\u30fc\u304c\u53f3\u304b\u3089\u51fa\u3066\u304f\u308b\u306e\u306f\u9055\u548c\u611f\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c anchor \u306e\u78ba\u8a8d\u306e\u305f\u3081\u306b\u3042\u3048\u3066\u884c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"632\" src=\"https:\/\/blog.txn.red\/wp-content\/uploads\/2024\/10\/kivymd-drawer-recycle-01-1.png\" alt=\"\" class=\"wp-image-693\" srcset=\"https:\/\/blog.txn.red\/wp-content\/uploads\/2024\/10\/kivymd-drawer-recycle-01-1.png 800w, https:\/\/blog.txn.red\/wp-content\/uploads\/2024\/10\/kivymd-drawer-recycle-01-1-300x237.png 300w, https:\/\/blog.txn.red\/wp-content\/uploads\/2024\/10\/kivymd-drawer-recycle-01-1-768x607.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2589\">\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-python\" data-lang=\"Python\" data-line=\"49,79, 67,81\"><code>from kivy.lang import Builder\n\nfrom kivy.properties import StringProperty\n\nfrom kivymd.app import MDApp\nfrom kivymd.uix.label import MDLabel\nfrom kivymd.uix.recycleview import MDRecycleView\n\n\nKV = &#39;&#39;&#39;\nMDScreen:\n\n    MDNavigationLayout:\n        # size_hint_x: 1\n\n        ScreenManager:\n            MDScreen:\n\n                MDBoxLayout:\n                    md_bg_color: self.theme_cls.secondaryContainerColor\n                    orientation:&#39;vertical&#39;\n                    \n                    MDTopAppBar:                        \n                        MDTopAppBarLeadingButtonContainer:\n                            MDActionTopAppBarButton:\n                                icon: &#39;menu&#39;\n                                on_release: nav_drawer.set_state(&#39;toggle&#39;)\n                            \n                        MDTopAppBarTitle:\n                            text: &#39;this is AppBar&#39;\n                            pos_hint: {&#39;center_x&#39;: .5}\n                            \n                    MDLabel:\n                        text: &quot;I&#39;m MDLabel&quot;\n\n        MDNavigationDrawer:\n            anchor: &#39;right&#39;\n\n            MDBoxLayout:\n                orientation: &#39;vertical&#39;\n\n                MDNavigationDrawerLabel:\n                    text: &#39;drawer items!!&#39;\n                    icon: &#39;format-list-bulleted&#39;\n\n                MDNavigationDrawerDivider:\n\n                NvDrawerRecycleItem:                    \n                    id: rv\n                    padding: 0, nav_drawer.height, 0, 0\n                    viewclass: &#39;Food&#39;\n                    RecycleBoxLayout:\n                        size_hint: (1, None)\n                        height: self.minimum_height\n                        orientation:&#39;vertical&#39;\n\n&lt;NvDrawerRecycleItem&gt;:\n\n&lt;Food&gt;:\n    text: &#39;name: {}&#39;.format(self.item)\n    adaptive_size: True\n    padding: 0, dp(16), 0, dp(16)\n\n&#39;&#39;&#39;\n\nclass Food(MDLabel):\n    item = StringProperty(&#39;&#39;)\n\nclass NvDrawerRecycleItem(MDRecycleView):\n    pass\n\n\nclass TestNavigationDrawer(MDApp):\n    def build(self):\n        self.theme_cls.theme_style = &#39;Dark&#39;  # or &#39;Light&#39;\n        return Builder.load_string(KV)\n    \n    def on_start(self):\n        rv = self.root.ids.rv\n        rv.data = (\n            { &#39;item&#39;: it }\n            for it in [\n                &#39;Apple&#39;, &#39;Banana&#39;, &#39;Cherry&#39;, &#39;Grape&#39;, &#39;Lemon&#39;,\n                &#39;Mikan&#39;, &#39;Orange&#39;, &#39;Pear&#39;, &#39;Lychee&#39;, &#39;Strawberry&#39;,\n                &#39;Peach&#39;, &#39;Fig&#39;\n            ]\n        )\n\n\nTestNavigationDrawer().run()<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u516c\u5f0f\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f MDNavigationDrawerMenu \u306e\u4e2d\u306b Drawer \u306e\u4e2d\u8eab\u3092\u5165\u308c\u3066\u308b\u306e\u3067\u3059\u304c\u3001\u305d\u3046\u3059\u308b\u3068 RecycleView \u3068 MDNavigationDrawerMenu \u306e\u9593\u306b\u5927\u304d\u306a\u9699\u9593\u304c\u3067\u304d\u3066\u3057\u307e\u3044\u3002\u3069\u3046\u3057\u3066\u3082\u5236\u5fa1\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001MDBoxLayout: orientation: &#8216;vertical&#8217; \u3067\u56f2\u3063\u3066\u3042\u3052\u306a\u3044\u3068 \u30c9\u30ed\u30ef\u30fc\u7cfb\u306e\u30a2\u30a4\u30c6\u30e0\u3068 RecycleView \u304c\u6a2a\u4e26\u3073\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u306e\u305f\u3081\u3001\u4e0a\u306e\u3088\u3046\u306a\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-python\" data-lang=\"Python\" data-line=\"6-7,  9\"><code>\n        MDNavigationDrawer:\n            id: nav_drawer\n            anchor: &#39;right&#39;\n\n            MDBoxLayout:\n                orientation: &#39;vertical&#39;\n\n                MDNavigationDrawerMenul:\n                    MDNavigationDrawerLabel:\n                       text: &#39;drawer items!!&#39;\n                       icon: &#39;format-list-bulleted&#39;\n\n                      MDNavigationDrawerDivider:\n\n                NvDrawerRecycleItem:                    \n                    id: rv\n                    padding: 0, nav_drawer.height, 0, 0\n                    viewclass: &#39;Food&#39;\n                    RecycleBoxLayout:\n                        size_hint: (1, None)\n                        height: self.minimum_height\n                        orientation:&#39;vertical&#39;\n<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u4f5c\u308a\u305f\u3044\u3082\u306e\u3092\u3084\u308b\u306e\u306b\u30c9\u30ed\u30ef\u30fc\u306e\u4e2d\u306b\u30ea\u30b9\u30c8\u5165\u308c\u308c\u3070\u3044\u3051\u308b\u3093\u3058\u3083\u306d\uff1f\u3068\u5b89\u76f4\u306b\u8003\u3048\u3066\u3084\u3063\u3066\u307f\u305f\u304c\u306a\u304b\u306a\u304b\u3057\u3093\u3069\u304b\u3063\u305f\u3002Kivy \u306e\u9053\u306f\u304d\u3073\u3057\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5f15\u304d\u7d9a\u304d\u3001Kivy \u3067\u3059\u3002 \u4eca\u56de\u306f\u3001KivyMD \u306e NavigationDrawer \u306e\u4e2d\u306b RecycleView \u3092\u7a81\u3063\u8fbc\u3093\u3067\u307f\u307e\u3059\u3002Kivy \/ KivyMD \u306f\u3053\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u52d5\u4f5c\u78ba\u8a8d\u3059\u308b\u5206\u306b\u306f\u7279\u5225\u96e3\u3057\u3044 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1,"footnotes":""},"categories":[9],"tags":[18,14],"class_list":["post-678","post","type-post","status-publish","format-standard","hentry","category-dev","tag-kivy","tag-python"],"_links":{"self":[{"href":"https:\/\/blog.txn.red\/index.php?rest_route=\/wp\/v2\/posts\/678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.txn.red\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.txn.red\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.txn.red\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.txn.red\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=678"}],"version-history":[{"count":0,"href":"https:\/\/blog.txn.red\/index.php?rest_route=\/wp\/v2\/posts\/678\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.txn.red\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.txn.red\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.txn.red\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}