flutter - Flutter Container 在 Row 小部件内定位或对齐

Question

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

这是代码示例：

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

Flutter 有丰富的Layouts文档，Tomek Polański 先生也详细讲解了 Layouts。

您必须了解 Row 和 Column 明智MainAxisAlignment，CrossAxisAlignment，

当您想定位具有单个孩子的东西时，请使用 FittedBox或ConstrainedBox或SizedBox

因为您在 ROW Widget CrossAxisAlignment的引擎盖下有多个孩子，所以您的朋友使用它来实现您的目标。

1. 将您的 Container 包裹在Expanded Widget下，这将为您提供 Flex 属性，它可以帮助您为 Container 提供灵活性。扩展的小部件也将有助于您的横向和纵向屏幕尺寸。
2. 在您的容器小部件中使用 SizedBox 小部件，它将为您提供一个具有最大宽度的不可见间隔大小的盒子。
3. 我将第一个容器（红色一个）作为弹性属性 1 以及第二个容器（蓝色一个），这意味着将 1 倍的行大小设置为两个容器，并将大小加倍到我不可见的SizedBox以便我们的红色盒子和BlueBox 可以安装在左上角和右上角。

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

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

Answer 2

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

输出 ：