kivyMDチュートリアル其の什参 Components - Dialog篇

はい、今週もやってきました！KivyMDのお時間でーす！

無駄にテンションは高いですが、今日も元気にやっていきたいと思います。
最近は結構暖かくなりましたね。ちょうどゴールデンウィークはお出かけ日和か、と思った
ところに緊急事態宣言。。。なかなかお出掛けを許してはくれません（泣）

今日は順番通りに行くと、DataTablesのはずですがこちらは動かなかった理由によりパス
します(大胆)。スマホアプリで表形式のものって何かあるっけ？ということでも理由として
はあります。というかまだ実装されていないという噂も。今後に期待しましょう！

ということで、今日はDialog篇となります。こちらはちゃんと動いているのでご安心を。

Dialog

ちゃんと見てますか？MaterialDesignのリンクを。

ごめんなさい、私もちゃんとは見てません。。チラ見するだけです（泣）
まぁでも、見てみる分には越したことはありません。そして見た方は解説記事を書いて
もらえればどれだけ嬉しいことか！見てみたいものです。

この機能については以下の通りの案内があります。重要だと思うので久しぶりに依頼してみます。

Dialogs inform users about a task and can contain critical information,
require decisions, or involve multiple tasks.

ダイアログはユーザーにタスクについて通知し、重要な情報を含めたり、決定を要求したり、
複数のタスクを含むことができます。

UIの部品としてはKivyMDだけでなく、色々なところでも使われているとは思いますがこうやって
振り返ってみるのも大事ですね。個人的な意見ですが、確かに通知するだけでは貧相な気もします。

Usage

さっそくサンプルコードがあるので、そちらを見てみましょう。ITについては論より証拠をという
ことがつきものです。

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.button import MDFlatButton
from kivymd.uix.button import MDRaisedButton
from kivymd.uix.dialog import MDDialog

KV = '''
MDFloatLayout:

    MDFlatButton:
        text: "ALERT DIALOG"
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: app.show_alert_dialog()
'''


class Example(MDApp):
    dialog = None

    def build(self):
        return Builder.load_string(KV)

    def show_alert_dialog(self):
        if not self.dialog:
            self.dialog = MDDialog(
                type='alert', # List -> ‘alert’, ‘simple’, ‘confirmation’, ‘custom’
                title="So what do you want to do?",
                text="Discard draft?",
                buttons=[
                    MDFlatButton(text="CANCEL"), 
                    MDRaisedButton(text="DISCARD"),
                ],
            )
        self.dialog.open()


Example().run()

なお、今日に関しては出来るだけプロパティを組み込み、カスタマイズしたコードを載せています。
なので、載せるものとしてはこれだけになります。他のitemsを入れたものとかは動作が保証している
ものだけGitHubにアップしています。そちらに関しては適宜pull後動かしてもらえればと思います。

import

ダイアログを動作させるためには以下のimport文が必要です。

from kivymd.uix.dialog import MDDialog

このコードは冒頭にあるサンプルコードをカスタムしているので少しimport文が変わります。
以下2文を追加して取り込んでください。

from kivymd.uix.button import MDFlatButton
from kivymd.uix.button import MDRaisedButton

クラス側

kv側では特に目新しいものはないので省略します。強いていうなれば、MDFlatButtonで
on_releaseコールバックメソッドにクラス側でのshow_alert_dialogメソッドを指定
しているくらいです。

と言っても、クラス側でも特に目新しいものはこれと言ってないのですが、それだとこの
ページ自体の意味はなくなるので触れておきます。今日のメインディッシュでもあるのですが、
サンプルコードでMDDialogはkivy側ではなくメソッドの中に定義しています。

class Example(MDApp):
    dialog = None

    (略)

    def show_alert_dialog(self):
        if not self.dialog:
            self.dialog = MDDialog(
                title="So what do you want to do?",
                text="Discard draft?",
                buttons=[
                    MDFlatButton(text="CANCEL"), 
                    MDRaisedButton(text="DISCARD"),
                ],
            )
        self.dialog.open()

まずdialogにNoneを代入しておきます。画面を開いたときにまずはdialogがない状態を
作るためでしょうか。メソッドの中だけにdialogオブジェクトを閉じた状態を作ってもよさげな
感じがしますが、挙動がおかしくなるのですかね。またその辺りは機会があれば見ることにして
おきます。

show_alert_dialogメソッドが呼ばれたときに、ダイアログが開かれていないことを確認して
MDDialogを生成します。サンプルコードではtitleとtextが定義されていませんでしたが、なる
べく広く触れようということで書いちゃいました。これらの仕様としては以下のようになります。

type

Dialog type. Available option are ‘alert’, ‘simple’,
‘confirmation’, ‘custom’.

type is an OptionProperty and defaults to ‘alert’.

typeはOptionPropertyでデフォルトはalertになります。
simpleとcomfirmationを使ってみましたが、これらは後述するtextが見えなくなることも
確認しています。textとtitle両方使う場合は、素直にalertを使用した方がいいかもです。

【補足】
結果のほうで、別のサンプルコードを動かして分かったことになりますが、simpleとかcomfir-
-mationだとかはListだとかのウィジェットを入れ込む用のtypeだと思ったほうがいいかもしれ
ません。textかリストなどのウィジェットを使うかで同時にtypeも使うものが決まってくるという。
これは設計時に決め打ち出来ることでもあるかと思われます。

title

Title dialog.

title is an StringProperty and defaults to ‘’.

text

Text dialog.

text is an StringProperty and defaults to ‘’.

titleとtext両方ともStringPropertyでデフォルトは空文字列になります。

buttons

List of button objects for dialog. Objects must be
inherited from BaseButton class.

buttons is an ListProperty and defaults to [].

ボタンに関してはListPropertyで、中にいれるものはBaseButtonを継承しなければいけません。
KivyMDで使用するbuttonはまず問題ない見込みですが、こちらはコードを見てみないことには分かり
ません。コードではどうなっているんだろうと思うときがありますので、KivyMD内部詳解みたいなページ
を書いてもよさそうですね。これも時間がありきな話になりますが。

items

List of items objects for dialog. Objects must be
inherited from BaseListItem class.

items is an ListProperty and defaults to [].

content_cls

Custom content class.

content_cls is an ObjectProperty and defaults to ‘None’.

あとは、カスタムしたコードではこれらは使ってないですが一応今後のためということと、GitHub上では
使っているということもあって念のため載っけておきます。リスト形式のものだったり、カスタム形式の
レイアウトだったりを入れ込むことが出来ます。

結果

ということで、実際に動かしてみて挙動を見てみましょう。

画面を立ち上げたときはこんな感じになります。

タイトルを入れたので、ネイティブにはイライラされそうな文言が追加されています。
訳すと、「で、お前はどうしたいのよ？」と。これも単に依頼してみました。

ここまでは問題なさそうに見えます。

ですが、あーっと、正体が現れてしまいました！
画面サイズに合致しない疑惑が生じています！

でもまぁこれは実機で動かしていないので、まだなんとも言えない状況なのですが
実際に実機で動かすときは挙動を確認してもよさそうな気はします。んー、TODOは
増える一方だなぁ。

ちなみにですが、他のサンプルコードも問題なく動いてはいます。
ですが、こちらだけはサンプルコードに修正が入りました。修正は以下のようになります。

<ItemConfirm>
    on_release: root.set_icon(check)

-    CheckboxLeftWidget:
+    CheckboxRightWidget:    
        id: check
        group: "check"

忙しくてtypoしたのか、以前の仕様が違うのかは神のみぞ知るところです。

他に関しては、画面サイズに関しては先ほどと同様です。

こちらも同じくになります。修正は入れていません。

まとめ

さぁ、いかがだったでしょうか。
汎用性が高そうなDialogでしたが、使いどころによればとても強力なウィジェットになりそうです。
通知だけの使用は少しもったいないような気がしてたまりません。# おそらく私だけが思ってる
だけかもですが

次回は順番通りに行くのをやめて、GW企画第2~3弾を考案中です。わーい、休みだ休みだー！
以前飛ばしていた、LayoutだとかButtonだとかですね。Cardも入りたいのですが、こればかりは
事情だったり用事だったりでどうなるかという次第です。なんとかやろうという気概だけはあるん
ですけどね。

ということで、今週はこれまでということで！ふぁー、ちょっと寝ようっと。

それでは、ごきげんよう。

参照

Components » Dialog
https://kivymd.readthedocs.io/en/latest/components/dialog/