Flutter：mainAxisAlignment 和 crossAxisAlignment 屬性在子行中不起作用

Question

我不能在子行中使用 mainAxisAlignment
我在下面添加了我的代碼語法，請幫助我

我的 output

所需 output

 Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, // here mainAxisAlignment not working
            children: <Widget>[
                new Container(...),
                new Container(...),
        ],),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,// here mainAxisAlignment not working
            children: <Widget>[
                new Container(...),
                new Container(...),
        ],),
],),

Answer 1

發生這種情況是因為子行小部件沒有任何大小。 您可以使用 Expanded 小部件包裝您的 Row 並使用 flex 屬性為每一行指定大小。

以下代碼將為您提供更多幫助。

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        flex: 7,
        child: Row(
            mainAxisAlignment: MainAxisAlignment
                .spaceEvenly, // here mainAxisAlignment not working
            children: <Widget>[
              new Container(),
              new Container(),
            ]),
      ),
      Expanded(
        flex: 3,
        child: Row(
            mainAxisAlignment: MainAxisAlignment
                .spaceEvenly, // here mainAxisAlignment not working
            children: <Widget>[
              new Container(),
              new Container(),
            ]),
      )
    ],
  ),

第二種解決方案：

您可以在容器之間添加具有特定寬度的 SizedBox 以增加空間。

Answer 2

首先，您必須確定恆定間距和動態間距。

圓形頭像和圖標必須具有恆定間距，因此您可以將padding參數添加到第一個Container 。

完成后，將Spacer()放在名稱Column和第一個Icon之間。 它將填充名稱和圖標之間的間距。

如果您更詳細地分享您的代碼，我可以提供更好的幫助。