颤振将两个项目在极端位置对齐-一个在左边，另一个在右边

104

我试图将两个项目的极端对齐，一个在左边，另一个在右边。我有一排在左边对齐，然后该行的一个孩子在右边对齐。但是，似乎子行正在从其父行获取alignment属性。这是我的代码

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不能展示其MainAxisAlignment.end财产？

flutter flutter-layout

— 朦胧的
source

211

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

— 雷米·罗素（RémiRousselet）
source

2

在第二个例子我用他的settingsRow，其中包含Text("right")

— 雷米Rousselet

我懂了。错过了部分

— 君特Zöchbauer

谢谢。但是出于好奇，我的代码为什么不起作用？在mainAxisAlignment孩子的不会发生。父母的财产会超过孩子的财产吗？

— MistyD '18年

1

第二个要好得多。

— 拉格·穆德姆

1

@KPradeepKumarReddy如果您不担心这两个窗口小部件的大小太大可能会相互重叠，我建议您使用Stack，然后使用包裹在Align窗口小部件中的两个子控件（一个带有Alignment.center，另一个带有Alignment.centerRight）。或者，在具有flex的行中具有三个Expanded窗口小部件：1.第一个将包含空白（SizedBox），第二个-居中的窗口小部件（包裹在Center中），第三个将包含右对齐的窗口小部件。

— Alex Semeniuk

76

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

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

— 英式
source

Spacer（）有什么作用？我想连续将一个小部件放在中间，将另一个小部件放在最右边。使用spacer（）是否可能？

— K Pradeep Kumar Reddy

53

您可以通过多种方式来实现。

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

输出：

— 公路警察
source

我希望一个小部件位于中间，而另一个则位于最右边。我们如何实现这一目标？

— K Pradeep Kumar Reddy

@KPradeepKumarReddyStack在这种情况下，可以使用一种好的方法。

— CopsOnRoad

@KPradeepKumarReddy我确定SO上肯定已经有这样的问题，您需要做的就是使用正确的关键字进行搜索。我无法真正在注释中向您显示代码，但想法是使用Stack，第一个为Align（正确），第二个可以为aCenter或简单Align。

— CopsOnRoad

1

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

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

— Poonam Kalra
source