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文档，Mr.Tomek Pola?ski 也对Layouts 进行了详细的讲解。

你必须了解行和列明智的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,
          ),
        ),
      ],
    ),
  ),
);