行が列の内側で水平方向に中央に配置されない理由

Aug 17 2020

デフォルトでは、が全幅の場合、は子を水平方向に中央揃えにしますが、列内に2枚のカードと1行を配置すると、2枚のカードがフラッターによって水平方向に中央に配置されますが、行は開始位置で同じままですか?どうして?私の場合、行は列の子であるため、水平方向の中央に配置する必要がある
と思いますが、そうではありません。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Container(
        color: Colors.purple,
        height: double.infinity,
        child: Column(
          //  mainAxisAlignment: MainAxisAlignment.center,
          //  crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Text(
                'Chart',
                style: TextStyle(fontSize: 20.0),
              ),
              elevation: 5,
              color: Colors.blue,
            ),
            Card(
              child: Text(
                'list of tx',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              color: Colors.purple,
            ),
            Row(
              children: [
                Text('this is row'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}



このコードの出力

回答

1 Uni Aug 17 2020 at 16:14

これは、デフォルトでRowが水平方向のスペース全体を占めるために発生しています。スペースをできるだけ少なくするように指示することで、修正できます。

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

mainAxisAlignment行のをに設定すると、行内にMainAxisAlignment.centerウィジェットが1つある場合にのみ機能します。それは子供たちにセンターに行くように言うだけです。

2 faroukosama Aug 17 2020 at 16:17

デフォルトでmainAxisSizeMainAxisSize.max、プロパティはウィジェットにあります。あなたがしなければならないのはMainAxisSize.min、それを、この例ではである親ウィジェットによって影響を受けるように変更することです。

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)
1 Yash Aug 17 2020 at 16:08

mainAxisAlignment行に引数を渡してみてください。例えば

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

これにより、行の子が中央に配置されます。