kivyMDでのページのリフレッシュ


# はじめに
↓↓今回つくるもの↓↓
![listview.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/8a73caf9-2d65-ab5f-75fc-965cb63f530c.gif)


KivyとKivyMDのバージョン
`Kivy==1.11.1
kivymd==0.102.1`

kivymdのバージョンは0.1XX.Xらへんがいいかも。古すぎると色々バグるので。

完全初学者なので間違ってるところがあったらコメントお願いします🙏
# なんで書こうと思ったの？
記事が少なすぎるからです（）
>googleでMDScrollViewRefreshLayout(今回つかうやつ）を検索した結果。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/06810630-c281-106c-bf13-6c333d5c03a9.png)

ちなみに２つ目に出てきたものはKivyMDモジュールの中身です（）
私が調べた限り、実質記事は１つしかないってことです。(筆者のgoogleサーチ力がないだけかもしれませんが。）

# とりあえずスクロールダウン(?)したらリロードのアレが出るだけ作ってみる
今回はListView,Adapterを使用します。ワケワカメな方は、
https://qiita.com/riniaaaaa/items/ff9f125738ad694a8ce2
これを見てください。
https://qiita.com/riniaaaaa/items/ff9f125738ad694a8ce2#listview%E3%81%A8adapter
これをベースに書きます。

```python:test1.py
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.properties import ObjectProperty, StringProperty
from kivy.uix.boxlayout import BoxLayout
from kivymd.navigationdrawer import NavigationLayout
from kivymd.list import OneLineAvatarListItem, ILeftBody
from kivy.factory import Factory
from kivymd.list import TwoLineListItem
#===追記=====
from kivy.clock import Clock
import time
#===========
# Builder.load_file("kvfile.kv")
Builder.load_string(
"""
<MainWindow@BoxLayout>
    orientation:"vertical"
    #====ここから====
    MDScrollViewRefreshLayout:
        id: refresh_layout
        refresh_callback: app.refresh_callback
        root_layout: root
        MDList:
            id:listview
    #===ここまで書き換え===
#Adapter
<CustomAdapter>
    text: root.text
    secondary_text: root.secondary_text
""")

class CustomAdapter(TwoLineListItem):
    text = StringProperty()
    secondary_text = StringProperty()

class MainApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

    def build(self):
        self.root = Factory.MainWindow()
        #ListViewをセット！
        self.setListView()

    def setListView(self):
        textList = ["fooo","hogeee","hugaaa"]
        subtextList = ["hello","fooaa","apple"]
        #itemをせっと。
        for text,subtext in zip(textList,subtextList):
            self.root.ids.listview.add_widget(
                CustomAdapter(
                    text=text,
                    secondary_text=subtext
                )
            )
    
    #====追加=====
    def refresh_callback(self, *args):
        def refresh_callback(interval):
            print("reload")
            #==↓重い処理とか==
            #===============
            self.root.ids.refresh_layout.refresh_done()
            print("ok")
        Clock.schedule_once(refresh_callback, 1)
    #============


if __name__ == "__main__":
    MainApp().run()
```

実行してみる
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/3a57b402-926d-05da-33cb-b7e8ffb6e6c7.gif)
いいですね。

# リフレッシュしたときにListViewを更新する
==↓重い処理とか==
===============この中に書く。

```py
#==↓重い処理とか==
self.setListView()
#===============
```
実行してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/dc57672d-2be3-51bd-4023-a476213b4be1.png)
増えとるがないか！！

実は`ListView`を一回クリアして上げる必要があります。

```py
...
def setListView(self):
    self.root.ids.listview.clear_widgets()
    ...
```
`self.root.ids.listview.clear_widgets()`を`setListView`にセットしてあげるとクリアできます。

実行してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/514c5c08-7e5d-9ffd-6ce5-cc2494e6de06.png)
何も変わらんで？
同じ値をsetListViewしてるだけなので画面に変化はありません。

これだと面白くないのでなにか値をListViewに追加してみましょう

```py
import datetime #追記
    ...
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        #===追記===
        self.textList = ["fooo","hogeee","hugaaa","fooo","hogeee","hugaaa"]
        self.subtextList = ["hello","fooaa","apple","fooo","hogeee","hugaaa"]
        #=========

    def build(self):
        self.root = Factory.MainWindow()
        self.setListView()

    def setListView(self):
        self.root.ids.listview.clear_widgets()
        #===消去===
        # textList = ["fooo","hogeee","hugaaa","fooo","hogeee","hugaaa"]
        # subtextList = ["hello","fooaa","apple","fooo","hogeee","hugaaa"]
        #=========
        #itemをせっと。
        for text,subtext in zip(self.textList,self.subtextList):
            self.root.ids.listview.add_widget(
                CustomAdapter(
                    text=text,
                    secondary_text=subtext
                )
            )
    
    def refresh_callback(self, *args):
        def refresh_callback(interval):
            print("reload")
            #====追記=====
            now = datetime.datetime.now()
            self.textList.append("hogee")
            self.subtextList.append(str(now))
            #============
            self.setListView()
            self.root.ids.refresh_layout.refresh_done()
            # self.tick=0
            print("ok")
        Clock.schedule_once(refresh_callback, 1)
```
実行してみると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/c6225b62-17d3-8380-55db-daf88d9f159d.png)
こうなります。
ちなみに新しい順にしたい場合は、

```py
    def setListView(self):
        self.root.ids.listview.clear_widgets()
        #===追記===
        self.textListRev = list(reversed(self.textList))
        self.subtextListRev = list(reversed(self.subtextList))
        #===========
        #itemをせっと。
        #====編集===                  　　↓ここ           ↓ここ
        for text,subtext in zip(self.textListRev,self.subtextListRev):
            self.root.ids.listview.add_widget(
                CustomAdapter(
                    text=text,
                    secondary_text=subtext
                )
            )
        #===========
```

これでおｋ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551034/62b7e30e-334f-7770-131b-2f304108820b.png)

きょうはここまで。

# 参考
https://github.com/heattheatr/kivymd/wiki/Components-Refresh-Layout