kivymd

12月 27, 2021

kivymd

from https://qiita.com/virty/items/ff08a262053a504222e5

kivy

i/kivy/button/main.py

from kivy.app import App
from kivy.metrics import dp
from kivy.uix.behaviors import TouchRippleBehavior
from kivy.uix.button import Button
from kivy.lang import Builder


KV = """
<RectangleFlatButton>:
    ripple_color: 0, 0, 0, .2
    background_color: 0, 0, 0, 0
    color: root.primary_color

    canvas.before:
        Color:
            rgba: root.primary_color
        Line:
            width: 1
            rectangle: (self.x, self.y, self.width, self.height)

Screen:
    canvas:
        Color:
            rgba: 0.9764705882352941, 0.9764705882352941, 0.9764705882352941, 1
        Rectangle:
            pos: self.pos
            size: self.size
"""


class RectangleFlatButton(TouchRippleBehavior, Button):
    primary_color = [
        0.12941176470588237,
        0.5882352941176471,
        0.9529411764705882,
        1
    ]

    def on_touch_down(self, touch):
        collide_point = self.collide_point(touch.x, touch.y)
        if collide_point:
            touch.grab(self)
            self.ripple_show(touch)
            return True
        return False

    def on_touch_up(self, touch):
        if touch.grab_current is self:
            touch.ungrab(self)
            self.ripple_fade()
            return True
        return False


class MainApp(App):
    def build(self):
        screen = Builder.load_string(KV)
        screen.add_widget(
            RectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
                size_hint=(None, None),
                size=(dp(110), dp(35)),
                ripple_color=(0.8, 0.8, 0.8, 0.5),
            )
        )
        return screen


MainApp().run()

kivyMD

i/kivymd/button.py

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp
from kivymd.uix.button import MDRectangleFlatButton


class MainApp(MDApp):
    def build(self):
        screen = Screen()
        screen.add_widget(
            MDRectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
            )
        )
        return screen


MainApp().run()

kivy

kivymd

まんまとkivyMDチームに騙されましたが、こんなことになってるのですね。
結果的にはkivyMDはkivyでマテリアルデザインを表現できるように抽象化した
ライブラリということでしたでしょうか(間違っていたら教えてください!)。
いやー、すごいぞkivyMD。マテリアルデザインをkivyで実装するとなると相当な
覚悟を持ってないと出来ませんね。というかやろうとしている方がいたら全力で止めた
方がいいかもしれません。

コードとしては、各要素なりコンポーネントなりでAPI化され、それを実装することで
Buttonなり何なりが表示される仕様となっているようです。動かしてみた様子としては
若干異なっていて、kivyMDの方がよりマテリアルな振る舞いを感じました。具体的には
影が押したあとに表示されるだとか、この辺は上手く実装されているんだなぁと感じました。

add font to show JP

from https://qiita.com/virty/items/fe2e4ebf4921f2e4b6af

from kivymd.app import MDApp
from kivy.lang import Builder

### font package
from kivy.core.text import LabelBase
from kivymd.font_definitions import theme_font_styles

class Test(MDApp):

    def build(self):
        ### self.theme_cls.primary_palette = "Gray"

        ### add font info, download gomarice_mukasi_mukasi.ttf to .py folder it should work
        LabelBase.register(name="gomarice_mukasi_mukasi",fn_regular="gomarice_mukasi_mukasi.ttf")
        theme_font_styles.append('gomarice_mukasi_mukasi')
        self.theme_cls.font_styles["gomarice_mukasi_mukasi"] = ["gomarice_mukasi_mukasi", 32, 0.15]

        return Builder.load_string(
            '''
BoxLayout:
    orientation:'vertical'

    MDToolbar:
        title: 'Bottom navigation'
        #md_bg_color: .2, .2, .2, 1
        #specific_text_color: 1, 1, 1, 1

    MDBottomNavigation:
        #panel_color: .2, .2, .2, 1

        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'season1'
            icon: 'human-male-female'

            MDLabel:
                text: 'いま今、あるところにおじいさんと\\nおばあさんがいました。'
                font_style: "gomarice_mukasi_mukasi"
                halign: 'center'

        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'season2'
            icon: 'golf-cart'

            MDLabel:
                text: 'おじいさんは山でゴルフに、\\nおばあさんは近所の\\nコインランドリーへ。'
                font_style: "gomarice_mukasi_mukasi"
                halign: 'center'

        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'end.'
            icon: 'clock-end'

            MDLabel:
                text: 'めでたし、めでたし。'
                font_style: "gomarice_mukasi_mukasi"
                halign: 'center'
'''
        )


Test().run()

Carousel 旋轉木馬側滑頁面

from https://qiita.com/virty/items/949dfffcaaeb4f40fe0c

from kivymd.app import MDApp
from kivy.lang import Builder

### import font package
from kivy.core.text import LabelBase
from kivymd.font_definitions import theme_font_styles


KV = '''
Screen:

   MDToolbar:
      title: "Example Carousel"
      pos_hint: {"top": 1}

   Carousel:
      MDLabel:
         text: "いま今、あるところにおじいさんと\\nおばあさんがいました。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おじいさんは山でゴルフに、\\nおばあさんは近所の\\nコインランドリーへ。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おじいさんはスコアが\\nやっと110に届き。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おばあさんは、\\nお札を入れる向きが\\n分からずイライラしてしまい。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
      MDLabel:
         text: "おしまい。"
         halign: "center"
         font_style: "gomarice_mukasi_mukasi"
'''


class CarouselApp(MDApp):
    def build(self):
       ### font setting
       LabelBase.register(name="gomarice_mukasi_mukasi",fn_regular="gomarice_mukasi_mukasi.ttf")
       theme_font_styles.append('gomarice_mukasi_mukasi')
       self.theme_cls.font_styles["gomarice_mukasi_mukasi"] = ["gomarice_mukasi_mukasi", 32, 0.15]

       return Builder.load_string(KV)


CarouselApp().run()

MDDialog

from https://qiita.com/virty/items/27d4d0d798c01e024889

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()

レイアウト

from https://qiita.com/virty/items/d5fa0a529912e6b0beb0

レイアウトはマニュアルページでどれだけあるんだろうと数えてみたところ、以下の7つありました。

Box Layout
Circular Layout
Float Layout
Grid Layout
Refresh Layout
Relative Layout
Stack Layout

Box Layout

使用できるオプションとして以下の3つがあるよということを案内されています。

adaptive_height
-> "size_hint_y: None"
　　　　　　+
　 "height: self.minimum_height"
adaptive_width
-> "size_hint_x: None"
　　　　　　+
　 "height: self.minimum_width"
adaptive_size
-> "size_hint: None, None"
　　　　　　+
　 "size: self.minimum_size"

若干、互換性のところが見にくいかもしれませんが言ってることは以下になります。

KivyMDでのオプション -> Kivyでのオプション

adaptive_widthなんかはKivyだとwidthオプションじゃね？みたいなツッコミをして
しまいそうですが、これも後述するので一旦放っておきましょう。

少なく書けるということは嬉しいことなのですが、具体的にsize_hint_yだとかheightは
どのようなものなのでしょうかね(heightとかは分かるよ！と言われそうだけど)。これまでも
この辺りはKivyに触れてないので当たり前ですが、触れてこなかったのは事実。

となれば実際に見た方が早いよと言われそうなので実際にコードと実行結果を折り交えながら
見ていきましょうか。以下のサンプルコードをご覧ください。マニュアルには載ってないので
専用に作ったコードになります。

xiv/boxlayout.py

from kivymd.app import MDApp
from kivy.lang import Builder


kv = '''

Screen:    

    MDToolbar:
        title: "Box Layout"
        pos_hint: {'top': 1}


    BoxLayout:
        orientation: "vertical"

        ### adaptive_height ###
        size_hint_y: None
        height: self.minimum_height

        ### adaptive_width ###
        #size_hint_x: None
        #height: self.minimum_width

        ### adaptive_size ###
        #size_hint: None, None
        #size: self.minimum_size

        padding: dp(10)
        spacing: dp(10)

        canvas:
            Color:
                rgba: 0, 1, 1, 1
            Rectangle:
                pos: self.pos
                size: self.size

        MDRectangleFlatButton:
            text: "BUTTON 1"
            size: 20, 20

        MDRectangleFlatButton:
            text: "BUTTON 2"
            size: 30, 30

        MDRectangleFlatButton:
            text: "BUTTON 3"
            size: 40, 40

        MDRectangleFlatButton:
            text: "BUTTON 4"
            size: 50, 50

        MDRectangleFlatButton:
            text: "BUTTON 5"
            size: 60, 60
'''

class Test(MDApp):

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

Test().run()

コード自体は特に目新しいものはないので、詳細に触れ込みはしないのですがBoxLayoutが
MDBoxLayoutではないことに注意してください。まずはKivyとしてどのような振る舞いを
するのか見てみましょう。

簡単な説明としては、BoxLayoutの配下に縦積みされるボタンを5つ配置するようになって
います。少し見た目を良くするためにボタン間に適当な余白などを入れています。あとは
adaptive_height/width/sizeなどがどのように変わってくるのかということを見る
ために、コメントアウトにてそれぞれを選ぶように記述しました。その具合を見るために
canvas.Color.rbgaオプションをテーマカラーではなく、緑と青を組み合わせた色に
変更しています。
# テーマカラーは違いが分かりにくいためです

まぁ、これは見たらこういうことかと分かるはずなので早速みてみましょう。

adaptive_height

少し画像のサイズが大きいですが。。
これも理由がありまして、スマホサイズに合わせるとなんか分かりにくくなるためです。
ちなみにkivyでの画面サイズ=800x600から変更せずにお送りいたしております。

全然中身に触れこめませんでしたが、やっと触れ込みます。
キャプチャを見てもらうと、分かりやすいですが絶妙に色分けがされていますね。

どうやら、ボタンなどのウィジェットのサイズと余白のサイズの累積がcanvas.Rectangleの
サイズとなるようです。これをもとに、size_hint(_x/y)の定義に触れますが、簡単に言うと
サイズのヒントになります。説明になってなく、誰かの構文を思い起こさせるかもですがこれは
しょうがありません。なぜなら、Kivyの公式マニュアルでもそう書かれているためなので。。。

[Widget class]
https://kivy.org/doc/stable/api-kivy.uix.widget.html

とまぁ、これだけだともの悲しいので少し触れ込みます。と思いましたが以下リンクを参照
ください。なんか触れ込むとBoxLayoutの詳細な触れ込みになりそうな気がしたことと、
すでにある有益な情報は再掲したほうがいいためです。せなさん、いつもお世話になって
います。そしてありがとうございます。

Kivyのボックスレイアウトの使い方とその仕様
https://senablog.com/python-kivy-boxlayout/

少し補足すると親ウィジェットの割合に対する比率ということも重要な点になります。あとは、
検索するとsize_hint_xとかの値が1以上に設定されているものを見かけますが、公式マニュ
アルとかは0~1の値を想定されているらしいです。なので、使用する場合は全体の比率を1と
しましょう。

とまぁ、触れ込みは以上となりますがsize_hint_yがNoneなので配下のウィジェットサイズに
合わせ、heightプロパティのself.minimum_heightと合わせると配下のウィジェットのサイズ
の累積が領域として確保されます。よく分からんとなった方は、色々試してみると分かりやすいかも
しれません。

adaptive_width

これからは説明も淡々とこなしていきます。というか全てやっているといつまで経っても
終わらん。。

すごく、見かけが悪いですが上記の通りとなります。なぜかMDRectangleFlatButtonのwidthが
上手く反映されていなく、adaptive_heightと違う気もしますがこれはこれでということで。全て
の幅なり高さなりが合っていると同じ領域が確保されるのかな。

adaptive_size

最後になると、確保される領域も最小限となります。見事に小ちゃくなってますね。

また、MDBoxLayoutでも上記と同じになるか見てみます。
コードとしてはマニュアルに書いてある通り、以下のように変更するだけになります。

xiv/boxlayout_md.py

(略)

-    BoxLayout:
+    MDBoxLayout:

-        ### adaptive_size ###
-        #size_hint: None, None
-        #size: self.minimum_size
+        adaptive_size: True

(略)

うん、変わりませんね。
# エビデンスの残し方としてはあまり良くないですが

それでも、ほんとにそうなるの？と疑り深い方はコピペして試されるか、自身のGitHubの
リポジトリからpull or cloneしてみて試してみてください。

GitHubのリンクは以下のリンク(最下部)から
# ややこしい

kivyMDチュートリアル其の伍 Themes - Icon Definitions篇

Float Layout

ここも淡々と触れ込んでいきます。
こちらは絶対座標系の下、サイズの位置を自由に設定してウィジェットを配置できるものです。
BoxLayoutと異なり、adaptive_*というプロパティはないことに注意です。

xiv/floatlayout.py

Screen:    

    MDToolbar:
        title: "Float Layout"
        pos_hint: {'top': 1}


    FloatLayout:
        canvas:
            Color:
                rgba: 0, 1, 1, 1
            RoundedRectangle:
                pos: self.pos
                size: self.size
                radius: [25, 0, 0, 0]

        MDRectangleFlatButton:
            text: "BUTTON 1"
            pos: 10, 460

        MDRectangleFlatButton:
            text: "BUTTON 2"
            pos: 690, 460

        MDRectangleFlatButton:
            text: "BUTTON 3"
            pos: 360, 240

        MDRectangleFlatButton:
            text: "BUTTON 4"
            pos: 10, 10

        MDRectangleFlatButton:
            text: "BUTTON 5"
            pos: 690, 10

特に大きな変更点はありませんが、ボタンの配置方法が変更しています。
それぞれ座標(x, y)となるようにposプロパティを書いています。ボタンの上から、左上より
右下というようにZと文字が書けるような順番としています。まぁ、これも見てもらった方が
良さそうですね。

おおっと、失礼。canvas.RoundedRectangleが画面全体を覆うようになりましたね。
現状これが分かったことで、覆うことはいらないのでcanvasプロパティごとコメントアウトしちゃ
います。

これで綺麗になりました。であとはMDFloatLayoutでも同様かどうか見てみます。
コードの方は、、、いいですかね。。まぁ、GitHub見てもらえれば良いので。
やったことだけ書くと、これも言わずもがなですが接頭辞にMDを付けただけです。

うーん、差分はなさそう(確かめてはない)。

こちらは少し注意が必要で、画面サイズがバラバラだったりすると以下のようにレイアウトが
崩れる恐れがあります。この点については、実機で試さないことにはなんとも言い難い点があり
ますが。。自動で計算してくれるのかな、この辺りは。

Grid Layout

さくさく進んでいきます。
こちらは格子状に配置させるレイアウトになりますね。例えていうなら、エクセルシートのセルと
言えますでしょうか。あまり例としては使いたくなかったですけどね。。

まぁ、あのような感じです。こちらはadaptive_*プロパティがあるのでご注意を。

これも見てもらったほうがいいのでコードと併せて。
kv以外は一致しているので、kvで定義しているところだけ抜粋します。

xiv/gridlayout.py

Screen:    

    MDToolbar:
        title: "Grid Layout"
        pos_hint: {'top': 1}


    GridLayout:
        cols: 2

        ### adaptive_height ###
        size_hint_y: None
        height: self.minimum_height

        ### adaptive_width ###
        #size_hint_x: None
        #height: self.minimum_width

        ### adaptive_size ###
        #size_hint: None, None
        #size: self.minimum_size

        canvas:
            Color:
                rgba: 0, 1, 1, 1
            Rectangle:
                pos: self.pos
                size: self.size

        MDRectangleFlatButton:
            text: "BUTTON 1"

        MDRectangleFlatButton:
            text: "BUTTON 2"

        MDRectangleFlatButton:
            text: "BUTTON 3"

        MDRectangleFlatButton:
            text: "BUTTON 4"

変更点はボタンを見やすくするために4つ配置したことと、GridLayoutが持っているプロパティ
colsを使っているくらいになります。rowsという行を表すプロパティもあります。これもどう
なるか見てみましょう。

adaptive_height

もう、言わずもがな感は出てきていますかね。
えぇ、出ていない？もう一度、BoxLayoutの方に戻ってみましょうw

そこからの差分としては、ちゃんと高さの累積にはなっているようです。

adaptive_width

なんか、意味不明なところがありますがこちらも領域については同じです。幅に応じて領域が
確保されています。なんで、上に配置されるのだろう。。

adaptive_size

はい、こちらも言わずもがなです。
こちらについても、MDGridLayoutと同じになるか見てみましょう。

まぁ、確かに証明になっていない感はどうしてもあるのですが全て動作確認はしていますので。
詳しくはGitHubのリポジトリの方にて。

Relative Layout

こちらはFloatLayoutと似ていて、相対座標で配置させるものとなります。引用した本からは
FloatLayoutのサブクラスとしても紹介されています。

こちらもコードと併せてどうなるか見てみましょう。

xiv/relativelayout.py

Screen:    

    MDToolbar:
        title: "Relative Layout"
        pos_hint: {'top': 1}

    RelativeLayout:
        canvas:
            Color:
                rgba: 0, 1, 1, 1
            RoundedRectangle:
                pos: (400, 300)
                size: self.size
                radius: [25, ]

        MDRectangleFlatButton:
            text: "BUTTON 1"
            pos: 10, 200

        MDRectangleFlatButton:
            text: "BUTTON 2"
            pos: 300, 200

        MDRectangleFlatButton:
            text: "BUTTON 3"
            pos: 10, 10

        MDRectangleFlatButton:
            text: "BUTTON 4"
            pos: 300, 10

FloatLayout同様、というか当たり前ですがadaptive_*プロパティはありません。

RoundedRectangleの基準点(四角形左下の点)を(400, 300)としてそこから相対座標
を設定してそれぞれのウィジェットを配置させることを目的としています。それぞれの
ウィジェットは画面右上あたりに表示されるはずです。

ではどうなるか見てみましょう。

あれーww出来てないぞーwww
うーん、これは困った。。MD側のボタンの仕様なのか、それともLayout側の仕様なのか
分かりません。ただし、領域については狙い通りとなってそうです。

追加調査でsize_hintで両方ともNone指定をしましたが、結果としては変わらず。
このことについては、継続調査が必要そうですが今は時間切れということでタイムアップ。。
時間がある際、もしくは今後のサンプルコードでこちらが出た場合に改めてということで、
許してください。。

あ、ちなみにですがMDRelativeLayoutに変更して実行してみると動作できませんでした。
今後に期待ということも言えますが、実装自体必要かなとか思えてしまいます。すでにMDFloat-
Layoutはあるわけなのですが。

Stack Layout

最後になります。こちらは上下左右からそれぞれのウィジェットを積み上げるレイアウトと
なります。マニュアル(KivyMD)からはBoxLayoutなどと変わりなく書かれていますが、
プロパティなどが少し変わります。BoxLayoutはorientationプロパティがverticalか
horizontalの2つが選択できますが、StackLayoutは'lr-tb'を筆頭に左右どちらから
始めるかという選択もできるようになります。
# 詳しくは後ほど参照する公式マニュアルを参照ください。

こちらについてはadaptive_*プロパティが存在します。
コードについては一部だけ載せておきます。

xiv/stacklayout.py

    StackLayout:
        orientation: "lr-tb"

はい、本当にこれだけになります。詳しくはGitHubリポジトリの方で(何回言うんだって話)。
ボタンの仕様に関しては、BoxLayoutの方と合わせています。

adaptive_height

こんな感じになりました。
"lr-tb"となるので左上から右に配置させることになります。高さを一定化させるのでこのように
なります。ペチャーっとなっていますね。

adaptive_width

続いてはこちら。
こちらも上側に吸い寄せられています。まぁ、左上から右で横幅が一定なので合ってはいるん
ですけどね。でもなぜ上側に吊し上げられるのか。

adaptive_size

こちらはこうなりました。adaptive_widthとどこでどう変わったんだああぁぁぁ！と叫びたい
気持ちを一旦押し殺して、観察してみます。いや、本当に何が変わった...？結果からは何ももの
申すことは出来ません。

では、本当にMDStackLayoutと同様になるかどうか見てみます。
こちらはMDを接頭辞に付けただけになります。

はい、一致しました。異論は認めません。

最後にMDStackLayoutで書いたものを"bt-rl"とするとどうなるか見てみます。

このように右下に配置することもできます。
StackLayoutの注意点としてはKivy1.5.0からorientationの変更があったりすることと、
adaptive_*との組み合わせによって結果が結構異なったりすることになります。

Button

from https://qiita.com/virty/items/29d792d5ecf4ad0f86be

from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp

Builder.load_string(
    """
<ExampleButtons@Screen>:

    MDToolbar:
        title: app.title
        elevation: 10
        pos_hint: {'top': 1}

    BoxLayout:
        padding: dp(10)
        size_hint: None, None
        size: self.minimum_size
        spacing: dp(10)
        orientation: "vertical"
        pos_hint: {"center_x": .5}

        MDIconButton:
            icon: "sd"
            pos_hint: {"center_x": .5}

        MDFloatingActionButton:
            icon: "plus"
            opposite_colors: True
            elevation_normal: 8
            pos_hint: {"center_x": .5}

        MDFlatButton:
            text: "MDFlatButton"
            pos_hint: {"center_x": .5}

        MDRaisedButton:
            text: "MDRaisedButton"
            elevation_normal: 2
            opposite_colors: True
            pos_hint: {"center_x": .5}

        MDRectangleFlatButton:
            text: "MDRectangleFlatButton"
            pos_hint: {"center_x": .5}

        MDRectangleFlatIconButton:
            text: "MDRectangleFlatIconButton"
            icon: "language-python"
            width: dp(230)
            pos_hint: {"center_x": .5}

        MDRoundFlatButton:
            text: "MDRoundFlatButton"
            pos_hint: {"center_x": .5}

        MDRoundFlatIconButton:
            text: "MDRoundFlatIconButton"
            icon: "language-python"
            width: dp(200)
            pos_hint: {"center_x": .5}

        MDFillRoundFlatButton:
            text: "MDFillRoundFlatButton"
            pos_hint: {"center_x": .5}

        MDFillRoundFlatIconButton:
            text: "MDFillRoundFlatIconButton"
            icon: "language-python"
            pos_hint: {"center_x": .5}

        MDTextButton:
            text: "MDTextButton"
            pos_hint: {"center_x": .5}

    MDFloatingActionButtonSpeedDial:
        data: app.data
        root_button_anim: True
"""
)


class MainApp(MDApp):

    def __init__(self, **kwargs):
        self.title = "KivyMD Examples - Buttons"
        self.data = {
            'language-python': 'Python',
            'language-php': 'PHP',
            'language-cpp': 'C++',
        }
        super().__init__(**kwargs)

    def build(self):
        self.root = Factory.ExampleButtons()


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

from kivy.uix.floatlayout import FloatLayout

def callback(self, event):
    print("button pressed")

myButton = MDRectangleFlatButton(
        text="Hello, World",
        pos_hint={"center_x": 0.5, "center_y": 0.5},
    )
myButton.bind(on_press=self.callback)
screen.add_widget(myButton)

Label

from https://qiita.com/virty/items/8475f11f314b76af21e1

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel

KV = '''
Screen:

    BoxLayout:
        id: box
        orientation: "vertical"

        MDToolbar:
            title: "MDLabel"

        # add 
        MDLabel:
            text: "Custom color"
            halign: "center"
            theme_text_color: "Custom"
            text_color: 0, 0, 1, 1
'''


class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard color themes.
        for name_theme in [
            "Primary",
            "Secondary",
            "Hint",
            "Error",
            "ContrastParentBackground",
        ]:
            screen.ids.box.add_widget(
                MDLabel(
                    text=name_theme,
                    halign="center",
                    theme_text_color=name_theme,
                )
            )
        return screen


Test().run()

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.font_definitions import theme_font_styles


KV = '''
Screen:

    BoxLayout:
        id: box
        orientation: "vertical"

        MDToolbar:
            title: "MDLabel"

'''
class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard font styles.
        for name_style in theme_font_styles[:-1]:
            screen.ids.box.add_widget(
                MDLabel(
                    text=f"{name_style} style",
                    halign="center",
                    font_style=name_style,
                )
            )
        return screen


Test().run()

self.add_widget(MDLabel(font_style="H1", text=InputType.value[Index.Text.value] ,halign="center",theme_text_color="Primary",pos=(int(InputType.value[Index.x.value])-offset, int(InputType.value[Index.y.value])-offset)))

from https://kivymd.readthedocs.io/en/latest/components/label/index.html

font_style

Label font style.

Available vanilla font_style are: ‘H1’, ‘H2’, ‘H3’, ‘H4’, ‘H5’, ‘H6’, ‘Subtitle1’, ‘Subtitle2’, ‘Body1’, ‘Body2’, ‘Button’, ‘Caption’, ‘Overline’, ‘Icon’.

font_style is an StringProperty and defaults to ‘Body1’.

theme_text_color

Label color scheme name.

Available options are: ‘Primary’, ‘Secondary’, ‘Hint’, ‘Error’, ‘Custom’, ‘ContrastParentBackground’.

theme_text_color is an OptionProperty and defaults to None.

text_color

Label text color in rgba format.

text_color is an ColorProperty and defaults to None.

icon

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDIcon
from kivymd.icon_definitions import md_icons


KV = '''
Screen:

    BoxLayout:
        orientation: "vertical"

        MDToolbar:
            title: "MDIcon"

        ScrollView:

            MDList:
                id: box
                padding: dp(20)
                spacing: dp(30)
'''


class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard font styles.
        for name_icon in md_icons.keys():
            screen.ids.box.add_widget(
                MDIcon(
                    halign="center",
                    icon=name_icon,
                )
            )
        return screen


Test().run()

Slider

from https://qiita.com/virty/items/a0aa7030d9e3d0ddf7c6

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''

Screen

    MDSlider:
        min: 0
        max: 100
        value: 20
'''

class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)


Test().run()

my_slider = MDSlider(min=0, max=100, value=0,pos_hint={'center_x': pX,'center_y': pY},
                         size_hint=(0.3, 0.6) , orientation="vertical")

def OnSliderValueChange(instance, value):
    # print(str(value))
    my_MD_Label.text = str(value)
    inputJ.ToTcpServer2(value)
my_slider.bind(value=OnSliderValueChange)
screen.add_widget(my_slider)

Spinner

from https://qiita.com/virty/items/14469fcf32dd4b7411e1

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:

    # Indeterminate mode
    MDSpinner:
        size_hint: None, None
        size: dp(46), dp(46)
        pos_hint: {'center_x': .3, 'center_y': .5}
        active: True if check.active else False

    # Spinner palette
    MDSpinner:
        # The number of color values can be any.
        size_hint: None, None
        size: dp(46), dp(46)
        pos_hint: {'center_x': .5, 'center_y': .5}
        palette:
            [0.28627450980392155, 0.8431372549019608, 0.596078431372549, 1], [0.3568627450980392, 0.3215686274509804, 0.8666666666666667, 1], [0.8862745098039215, 0.36470588235294116, 0.592156862745098, 1], [0.8784313725490196, 0.9058823529411765, 0.40784313725490196, 1],
        active: True if check.active else False

    # Determinate mode
    MDSpinner:
        size_hint: None, None
        size: dp(46), dp(46)
        pos_hint: {'center_x': .7, 'center_y': .5}
        determinate: True
        active: True if check.active else False

    MDCheckbox:
        id: check
        size_hint: None, None
        size: dp(48), dp(48)
        pos_hint: {'center_x': .5, 'center_y': .4}
        active: True
'''


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)


Test().run()

TextField

from https://qiita.com/virty/items/338d3c97c7fdd5fb1dda

from kivy.lang import Builder
from kivymd.app import MDApp

KV = '''
Screen:

    BoxLayout:
        orientation: "vertical"

        MDLabel:
            text: "MDTextFieldRect"

        MDTextFieldRect:
            size_hint: 1, None
            height: "30dp"

        MDSeparator:

        MDLabel:
            text: "MDTextFieldRound"

        MDTextFieldRound:
            hint_text: 'Empty field'


'''


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

    def build(self):
        return self.screen

Test().run()

Toolbar

from https://qiita.com/virty/items/3c726e2a7faa694fb54d

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDBoxLayout:
    orientation: "vertical"

    MDToolbar:
        title: "MDToolbar"
        left_action_items: [["menu", lambda x: app.call()]]
        right_action_items: [["dots-vertical", lambda x: app.call_kebab()], ["clock", lambda x: app.call_clock()]]
        md_bg_color: app.theme_cls.accent_color
        specific_text_color: app.theme_cls.primary_color
        elevation: 10

    MDLabel:
        text: "Content"
        halign: "center"
'''


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)

    def call(self):
        print("left action from hamburger menu!")

    def call_kebab(self):
        print("right action from kebab menu!")

    def call_clock(self):
        print("right action from clock menu!")

Test().run()

Tooltips

from https://qiita.com/virty/items/dac2d19257f94659144e

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
<TooltipMDIconButton@MDIconButton+MDTooltip>


MDScreen:

    TooltipMDIconButton:
        icon: "language-python"
        tooltip_text: self.icon
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)


Test().run()

To use the MDTooltip class, you must create a new class
inherited from the MDTooltip class:
In Kv-language:
<TooltipMDIconButton@MDIconButton+MDTooltip>
In Python code:
class TooltipMDIconButton(MDIconButton, MDTooltip):
    pass

Tabs

from https://qiita.com/virty/items/46268277e782bba1a0c5

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.icon_definitions import md_icons

KV = '''
MDBoxLayout:
    orientation: "vertical"

    MDToolbar:
        title: "Example Tabs"

    MDTabs:
        id: tabs
        on_tab_switch: app.on_tab_switch(*args)


<Tab>

    MDIconButton:
        id: icon
        icon: root.icon
        user_font_size: "48sp"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class Tab(MDFloatLayout, MDTabsBase):
    '''Class implementing content for a tab.'''


class Example(MDApp):
    icons = list(md_icons.keys())[15:30]

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

    def on_start(self):
        for tab_name in self.icons:
            self.root.ids.tabs.add_widget(Tab(icon=tab_name))

    def on_tab_switch(
        self, instance_tabs, instance_tab, instance_tab_label, tab_text
    ):
        '''
        Called when switching tabs.

        :type instance_tabs: <kivymd.uix.tab.MDTabs object>;
        :param instance_tab: <__main__.Tab object>;
        :param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>;
        :param tab_text: text or name icon of tab;
        '''
        # get the tab icon.
        count_icon = instance_tab.icon
        # print it on shell/bash.
        print(f"Welcome to {count_icon}' tab'")


Example().run()

搜尋此網誌

姓蔡的Blogger

kivymd

Box Layout

adaptive_height

adaptive_width

adaptive_size

Float Layout

Grid Layout

adaptive_height

adaptive_width

adaptive_size

Relative Layout

Stack Layout

adaptive_height

adaptive_width

adaptive_size

留言

張貼留言

熱門文章

網路芳鄰win10 與XP 能連線的方法

リンクサーバーの作成(SQL Server データベース)

kivymd

Box Layout

adaptive_height

adaptive_width

adaptive_size

Float Layout

Grid Layout

adaptive_height

adaptive_width

adaptive_size

Relative Layout

Stack Layout

adaptive_height

adaptive_width

adaptive_size

留言

張貼留言

熱門文章

網路芳鄰win10 與XP 能連線的方法

リンク サーバーの作成(SQL Server データベース)

リンクサーバーの作成(SQL Server データベース)