kivyMDチュートリアル其の什漆 Components - Dropdown Item篇


みなさーん!おはこーんばーんーは!

なぞに、そして無駄にテンションが高いですが皆さんはいかがでしょうか。
5月病などにはなっていないでしょうか。私自信は先んじて4月末に来ていました。。
なので、このようなテンションになっているわけであります(わりかしどうでもよい)。

無事、GW特別企画も3弾完了出来て今日からは通常に戻っていきます。
今日は続きからで、タイトルにもある通りDropdown Item篇となっています。

Dropdown Item

さぁ、いつも通りのMaterialDesignのサイトのリンクを見てもらって...

おや?今日はリンクがありませんね。なんてこった、パンナ...
言いませんよ。これ以上ふざけると、見てる方がイライラしてブラウザバックされるかも
しれないので。。

これには訳がありそうで、コード下あたりにSee alsoセクション?がありMDDropdown-
-Menuと連携されますとあります。そのリンク先にはちゃんとMaterialDesignのリンク
もあり、準備万端といった状況でしょうか。ですので、触れ込むときはMenu篇となりそう
なので先に見たい方はリンクたどって見て頂ければと思います。

Usage

今日は内容が少ないということも、浮足立っている理由となります。

まぁ、そういうどうでもよいことは置いておいて、内容が本当に少なくさっそく使用方法
が紹介されています。なので、早いですがサンプルコードを下に載せておきます。

xvii/dropdown_item.py
from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
Screen

    MDToolbar:
        elevation: 10
        title: "DropDown Item"
        pos_hint: {'top': 1}

    MDDropDownItem:
        id: drop_item
        pos_hint: {'center_x': .5, 'center_y': .5}
        text: 'Item'
        on_release: self.set_item("New Item")
'''


class Test(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.screen = Builder.load_string(KV)

    def build(self):
        return self.screen


Test().run()

コードも本当に少なく、マニュアル見てもらった方は分かるかと思いますがこれだけに
なります。少し違うぞ!と気づかれた方は鋭すぎますね。はい、動かして見かけが寂し
かったので、ツールバーを足しました。

で、本当に早いですが、後はメインディッシュに入っていきます。以下にピックアップ
しておきます。

MDDropDownItem:
    id: drop_item
    pos_hint: {'center_x': .5, 'center_y': .5}
    text: 'Item'
    on_release: self.set_item("New Item")

これだけだと、何をやってんのよと思われるかもしれませんが、先に結果を見た方が
早いかもしれません。なので、もう待ちきれない!という方は下の結果をご覧ください。

我慢強い方のためにも、一応触れ込みをしておきます。
まず中央にMDDropDownItemウィジェットが配置されていまして、この詳細はMenu篇
にて触れ込みますが押すとアイテムが下にピロっと出てくるものですね(分かりにくい)。

ここでは下にアイテムを表示することはなく、押すと初期表示されていた「Item」から
「New Item」と表示が変わる仕組みになっています。正直どこで使うのですかね、という
ツッコミは一旦置いておいて、動作としてはこのようになっていました。

結果に入りたいところですが、もう少しお待ちを。ここで仕様について触れておきます。
というか引用するだけですけどね。。

API - kivymd.uix.dropdownitem

text

Text item.
text is a StringProperty and defaults to ‘’.

set_item(self, name_item)

Sets new text for an item.

んー、少ない。使用したものはたった2つです。
あとは、使用していないですが以下のようなものもあります。

font_size

Item font size.
font_size is a NumericProperty and defaults to ’16sp’.

カスタムフォントを使いたいところですが、おそらく使えないと思います。
もし使うとしたら、フォントサイズの変更だけを変える...という使い方に
なりそうです。使うかどうかは分かりませんが。。

結果

んー、結果に入るのは早いのかどうなのか。少し長いもの書いてきて、量が少なくなると
ソワソワしてしまいました。。

いけねっ。待たせていた方もいましたね。ではさっそく、おりゃ!

これはマニュアル通りですね。では、これを押すとどうなるか見ものです(多分そこまでではない)。

はい、以上です。何が変わったか分からない?よく目をこじ開けてみな!
という言い方は洋画にありそうなセリフですね(ない)。

まとめ

さて、いかがだったでしょうか。

今日はサクサクいっているような気がするのはどうでもよいことですが、使う場面によっては
効果がバツグンなような、ないようなそんなウィジェットとなります。

テキストが変更されるのは良いのですが、初期表示のテキストに戻らないのですよね。
なので、一旦変更してしまうと元に戻らない...そんなカワイイ一面も併せ持っています。

使う用途としては、どーなのでしょうかね。強いて言うなら、不可逆的なラベルとして使用
する...そんな使い方があるのかどうかですが、かなり限定されそうなウィジェットの予感
がプンプンしそうです。

まぁ、でもここで判断するのは少し早々なので今度のMenu篇でもろもろ変わってくるかも
しれません。そのときまでひとまず待ってみましょうか。

では、今日はまとめが1番長いのでは疑惑が出てきてしまったので、これにて終わります。
来週はExpansion Panel篇の予定です。

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

参照

Dropdown Item
https://kivymd.readthedocs.io/en/latest/components/dropdown-item/