テーマ
この記事では、フラッターにおける行と列の使い方を紹介します。平たく言えば、横レイアウトと縦レイアウトの使い分けです。
開発環境
win10
androidstudio2022.1.1
jdk11
fluttersdk-flutter_windows_3.7.8
ソースコード
完全なオープンソース デモのアドレスは、記事の最後に添付されます。
開発プロセス
まず、ここでの行と列のレイアウトは Android の LinearLayout に似ており、orientation 属性を使用してレイアウトの方向を制御します。
Row は横レイアウトです。Row レイアウトを使用します。通常の表示状況は次のとおりです。
Column は縦方向のレイアウトです Column レイアウトを使用します 通常の表示状況は以下のようになります:
レイアウトの方向が異なることがわかります。
これら 2 つのコントロールのプロパティを以下に示します。
MainAxisAlignment：
現在の配置方向の主軸 (行など)、主軸は水平線です
spaceBetween: 中央のサブコントロールを等間隔に配置します
start: 主軸の先頭にサブコントロールを配置します (同様にAndroidデフォルトのLinearlayout配置ルールに準じます）
end：主軸上にサブコントロールを配置 終了位置 center
：主軸の真ん中にサブコントロールを配置
spaceEvenly：主軸の空白領域を均等に分割各サブコントロール間の間隔が等しくなるように
spaceAround: 各コンポーネントの両側の残りのスペースが等しいことを示します
交差軸の位置合わせ:
現在の整列方向の垂直交差軸 (行など)、交差軸は垂直方向の
開始: 交差軸の開始場所 終了
: 交差軸の終了場所 中心
: 交差軸の中心位置
ストレッチ:サブコントロールを交差軸
ベースラインに塗りつぶします: 交差ラインに位置合わせします。 textBaseline とともに使用され、テキストに作用します。
テキストベースライン：
テキスト配置の
アルファベット: テキストのベースラインは英語を参照するように設定されます
表意文字: テキストのベースラインは中国語を参照するように設定されます
2 つのプロパティには大きな違いはありません。
主軸のサイズ:
コントロールのサイズ、行は水平サイズ、列は垂直サイズ
MainAxisSize.min: コントロールは可能な限り小さい
MainAxisSize.max: コントロールはいっぱいまで埋められます – デフォルト
垂直方向:
垂直方向の配置
下方向: 上から
下へ 上方向: 下から上へ
実際、日常的に使用する場合、最も一般的に使用される属性は MainAxisAlignment と MainAxisSize です。
MainAxisSize は、Android レイアウトの Wrap_content と match_parent に対応します。
MainAxisAlignment はサブレイアウトの配置です。
最後に、行と列のレイアウトを本当に理解したい場合は、単に記事を読むことはお勧めできません。コードを手動で入力して要約し、深く覚えておく必要があります。
最後に、ソースコードのアドレスは次のとおりです:
https://gitee.com/motosheep/flutter-demo
ブランチに切り替え: 202303281729RowCol コントロール