Row 小部件内的 Flutter Container 定位或对齐

Question

我是 flutter 的新手。现在正在学习如何定位或对齐小部件。我的行小部件内有两个容器。我想在左上角设置我的第一个容器（红色容器），还想在右上角设置我的第二个容器（蓝色容器）。我怎样才能做到这一点？

这里是代码示例：

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
              ),
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Positioned 小部件仅与 Stack 小部件一起使用，因此您可以使用以下示例解决您的问题，但使用 Row 小部件可能无法解决问题

Stack(children: <Widget>[
            Positioned(
              top: 5,
              left: 5,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
              ),),
            Positioned(
              top: 5,
              right: 5,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),),
          ],
)

输出：

Answer 2

Flutter 在 Layouts, Mr.Tomek Polański has also explain 布局方面有丰富的详细文档。

您必须了解行和列方式 MainAxisAlignment、CrossAxisAlignment、

当你想定位单个 child 的东西时，使用 FittedBox 或 ConstrainedBox 或 SizedBox

因为您有多个 children's 在 ROW 小部件的引擎盖下 CrossAxisAlignment 是您的朋友用它来实现您的目标。

将您的 Container 包裹在 Expanded Widget 下，这将为您提供 Flex 属性，它可以帮助您为 Container 提供灵活性。扩展的小部件也将有助于您的横向和纵向屏幕尺寸。
在您的容器小部件中使用 SizedBox 小部件，这将为您提供最大宽度的不可见间隔 Sized Box 之间。
我把第一个 Container(Red One) 设置为 flex 属性 1 以及 Second Container(Blue One)，这意味着将行的大小设置为 1 倍到两个容器，并将我的不可见 SizedBox 的大小加倍，以便我们的红框和蓝框可以放在左上角和右上角。

在这里您可以看到代码的最终版本。

return Scaffold(
  backgroundColor: Colors.teal,
  body: SafeArea(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.red,
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            width: double.infinity,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
);

Row 小部件内的 Flutter Container 定位或对齐

Flutter Container Positioning or alignment inside Row widget

flutter

flutter-container

flutter-widget