Row

Rowウィジェットは、子ウィジェットを横に並べて配置するレイアウトコンテナーです。

定義・役割

Rowウィジェットは、内側に入れた子を左から右へ1行に配置します。子の横方向・縦方向のアライメントと、子の間の間隔を設定できます。

• カテゴリー: Layouts

機能

機能	説明
横方向の配置	子ウィジェットを左から右へ1行に並べます。
アライメント	横（主軸）・縦（交差軸）のアライメント方法を設定します。
間隔	子の間の間隔を指定します。

使い方

1. 左側のウィジェットパレットでLayoutsカテゴリーを開きます。
2. Row項目をキャンバスにドラッグ&ドロップします。
3. 子ウィジェットをRowの中に入れます。
4. mainAxisAlignment・crossAxisAlignment・spacingなどのプロパティでアライメントと間隔を調整します。

プロパティ

プロパティ	説明	デフォルト値	値 / タイプ
mainAxisSize	横方向のスペースを占める方法	max	min, max
mainAxisAlignment	横（主軸）のアライメント	start	start, end, center, spaceBetween, spaceAround, spaceEvenly
crossAxisAlignment	縦（交差軸）のアライメント	center	start, end, center, stretch, baseline
spacing	子の間の間隔	0	数値
textDirection	横方向の配置方向	未指定	rtl, ltr
verticalDirection	縦方向の基準	down	up, down
textBaseline	ベースラインのアライメント基準	未指定	alphabetic, ideographic
clipBehavior	あふれたときの切り取り方法	none	none, hardEdge, antiAlias, antiAliasWithSaveLayer

注意・ヒント

ヒント

子を余ったスペースに合わせて伸ばすには、子にFlexible/Expanded系の設定を指定します。縦いっぱいに広げるには、crossAxisAlignmentをstretchに設定します。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Controlは、Row Widget Controlドキュメントで確認してください。