3
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-14

はじめに

↓↓今回つくるもの↓↓
listview.gif

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

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

完全初学者なので間違ってるところがあったらコメントお願いします🙏

なんで書こうと思ったの?

記事が少なすぎるからです()

googleでMDScrollViewRefreshLayout(今回つかうやつ)を検索した結果。
image.png

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

とりあえずスクロールダウン(?)したらリロードのアレが出るだけ作ってみる

今回はListView,Adapterを使用します。ワケワカメな方は、
https://qiita.com/riniaaaaa/items/ff9f125738ad694a8ce2
これを見てください。
https://qiita.com/riniaaaaa/items/ff9f125738ad694a8ce2#listview%E3%81%A8adapter
これをベースに書きます。

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
いいですね。

リフレッシュしたときにListViewを更新する

==↓重い処理とか==
===============この中に書く。

#==↓重い処理とか==
self.setListView()
#===============

実行してみる
image.png
増えとるがないか!!

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

...
def setListView(self):
    self.root.ids.listview.clear_widgets()
    ...

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

実行してみる
image.png
何も変わらんで?
同じ値をsetListViewしてるだけなので画面に変化はありません。

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

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
こうなります。
ちなみに新しい順にしたい場合は、

    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
                )
            )
        #===========

これでおk。
image.png

きょうはここまで。

参考

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2