![見出し画像](https://assets.st-note.com/production/uploads/images/93485325/rectangle_large_type_2_c9d040a7e97e4624f736999c7485b5aa.png?width=800)
KivyMDをインストール+レイアウトの基本
Kivy中級の講座では、Kivyにマテリアルデザインを適用できるKivyMDを使用します。早速動作確認してみました。
#KivyMD
— ニムロイド(資格勉強アカ) (@nimu_study) December 17, 2022
KivyMDを使えるようにしてみた。
インタープリターにKivyMDのライブラリを追加して呼び出せるようにする。それだけ👍 pic.twitter.com/TKxLEJ6W2C
レイアウトの使い方
KivyMDでデフォルトで使えるスクリーンのレイアウトには、以下が挙げられます。アプリ製作をする際に参考にメモしておきます。
・ボックスレイアウト
縦・横にウィジェットを配列したい時に使う
![](https://assets.st-note.com/img/1671245619427-GlMAuHAt81.png?width=800)
・スタックレイアウト
左→右、上→下という順でウィジェットを配置する
![](https://assets.st-note.com/img/1671245630203-GULEadrGr7.png?width=800)
・グリッドレイアウト
スクリーンを行(rows)、列(columns)で分割し、指定した行列に要素を配置する
![](https://assets.st-note.com/img/1671245641810-rjDbORSs8Y.png?width=800)
・アンカーレイアウト
末端・中央などの基準点からの距離を指定することでウィジェットを配置する
![](https://assets.st-note.com/img/1671245733245-pyWt0Y1vnQ.png?width=800)
・フロートレイアウト
原点からの距離を配置することで自由にウィジェットを配置できる
![](https://assets.st-note.com/img/1671245740319-dIxNKyVO3D.png?width=800)
・ページレイアウト
スワイプしてページをめくる、直感的な配置にできる
![](https://assets.st-note.com/img/1671245663041-0NRIz99GIi.png?width=800)
・リレーティブレイアウト(スキャッターレイアウト)
親ウィジェットからの相対的な距離を使って子ウィジェットを配置する
![](https://assets.st-note.com/img/1671245659363-tVArXa0eko.png?width=800)
この記事が気に入ったらサポートをしてみませんか?