Flutter căn chỉnh hai mục ở các cực - một ở bên trái và một ở bên phải

Tôi đang cố gắng căn chỉnh hai mục ở hai cực, một ở bên trái và một ở bên phải. Tôi có một hàng được căn ở bên trái và sau đó một con của hàng đó được căn ở bên phải. Tuy nhiên, có vẻ như hàng con đang lấy thuộc tính căn chỉnh từ hàng mẹ của nó. Đây là mã của tôi

var SettingsRow = new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Right",softWrap: true,),
            ],
        );

        var nameRow = new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Left"),
                SettingsRow,
            ],
        );

kết quả là tôi nhận được một cái gì đó như thế này

Left Right

Những gì tôi muốn là

Left      Right

Ngoài ra có đủ không gian trên Hàng. Câu hỏi của tôi là tại sao Row con không trưng bày MainAxisAlignment.endtài sản của nó ?

Sử dụng một đơn Rowthay thế, với mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

Hoặc bạn có thể sử dụng Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);

Một giải pháp đơn giản sẽ là sử dụng Spacer()giữa hai tiện ích con

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);

Bạn có thể làm điều đó bằng nhiều cách.

Sử dụng mainAxisAlignment: MainAxisAlignment.spaceBetween

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
  ],
);

Sử dụng Spacer

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

Sử dụng Expanded

Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(child: SizedBox()),
    FlutterLogo(),
  ],
);

Sử dụng Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

Đầu ra :

Có CopsOnRoadlà đúng, thông qua ngăn xếp, bạn có thể căn chỉnh một ở bên phải và khác ở giữa.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )