[FLUTTER] Row()

7040 ワード
dart row flutter Widget テキストリンク

Row()


この記事で紹介するwidgetは、前述のColumn()コンポーネントと同様のコンポーネントRow()widgetです
Columnはwidgetを垂直に配置し、Rowは横方向に配置された部品です.
Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  })
使用方法はColumnと同様と見なすことができる
これは3つの容器を横に並べた箱のコードです.
ここで重要なのはmainAxisAlignmentプロパティです
ColumnコンポーネントのMainAxisAlignmentプロパティ値がコンポーネントに垂直な場合、Rowコンポーネントは横方向に整列します.
CrossAxisAlignnmetも同様で,Columnでは横から横へ,横から横へ
Row(
          mainAxisAlignment: mainAxisAlignment,
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(18), color: Colors.pink),
            ),
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(18),
                  color: Colors.pink.shade300),
            ),
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(18),
                  color: Colors.pink.shade100),
            ),
          ],
        ),
MainAxisAlignnmentのオプション
mainAxisAlignment: MainAxisAlignment.start
mainAxisAlignment: MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.spaceAround
mainAxisAlignment: MainAxisAlignment.spaceBetween
mainAxisAlignment: MainAxisAlignment.spaceEvenly

Example


[1日1 js]ループコード
Django-REST-BASIC+