Flutter 在极端情况下对齐两个项目——一个在左边，一个在右边

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 也有足够的 space。我的问题是为什么子 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

连续使用代码行mainAxisAlignment: MainAxisAlignment.spaceBetween,。这将使小部件处于两个极端。但是，如果您正在处理 TextField，请改用装饰 class 和属性前缀*** 和后缀***

Answer 6

使用 Flexing 小部件

Row(
            children: [
              Text(
                '1',
                style: TextStyle(
                    fontSize: 18, color: Colors.black),
              ),
              Flexible(fit: FlexFit.tight, child: SizedBox()),
              Text(
                '10',
                style: TextStyle(
                    fontSize: 18, color: Colors.black),
              ),
            ],
          ),

Answer 7

我的行中有 多个条目，而接受的答案对我不起作用。
我需要 将最后一个条目包装在 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,

Flutter 在极端情况下对齐两个项目——一个在左边，一个在右边

Flutter align two items on extremes - one on the left and one on the right

flutter

flutter-layout