颤动对齐极端的两个项目 - 一个在左边,一个在右边

Question

我试图在左边的一个极端和右边的一个极端对齐两个项目.我有一行与左边对齐,然后该行的子项与右边对齐.但是,子行似乎从其父级中获取了对齐属性.这是我的代码

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,
            ],
        );

结果我得到了这样的东西

Left Right

我想要的是什么

Left      Right

Row上还有足够的空间.我的问题是为什么Row不展示其MainAxisAlignment.end财产？

Answer 1

使用单个Row而不是mainAxisAlignment: MainAxisAlignment.spaceBetween.

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

或者你可以使用 Expanded

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

Answer 2

一个简单的解决方案是Spacer()在两个小部件之间使用

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

Answer 3

您可以通过多种方式进行操作。

使用 mainAxisAlignment: MainAxisAlignment.spaceBetween

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

使用 Spacer

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

使用 Expanded

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

使用 Flexible

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

输出：

Answer 4

是CopsOnRoad的，通过堆栈，您可以将一个在右侧对齐，另一个在中心对齐。

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

Answer 5

我的行中有多个条目，并且接受的答案对我不起作用。
我需要将最终条目包装在Align.

我有：

Row( 
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    ...allMyLeftAlignedChildren,
    Expanded( 
      child: myRightAlignedChild, 

我需要：

Row( 
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    ...allMyLeftAlignedChildren,
    Expanded( 
      child: Align(                       // <---  these 2 lines fixed it 
        alignment: Alignment.centerRight, // <---  these 2 lines fixed it
        child: myRightAlignedChild,