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

Posted 2023-02-23

【中文标题】Flutter Container 在 Row 小部件内定位或对齐

【英文标题】：Flutter Container Positioning or alignment inside Row widget

【发布时间】：2020-03-05 15:44:29

【问题描述】：

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

【参考方案1】：

Flutter 在 Layouts 上有丰富的文档，Mr.Tomek Polański 也有 explain Layouts 的详细信息。

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

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

因为您有多个孩子的 ROW Widget CrossAxisAlignment 是您的朋友使用它来实现您的目标。

将您的 Container 包裹在 Expanded Widget 下，这将为您提供 Flex 属性，它可以帮助您为 Container 提供灵活性。扩展的小部件也将有助于您的横向和纵向屏幕尺寸。 在您的容器小部件中使用 SizedBox 小部件，这将为您提供最大宽度的不可见间隔大小的盒子。 我把第一个容器（红色一个）作为 flex 属性 1 以及第二个容器（蓝色一个），这意味着将两个容器的行大小设置为 1 倍，并将大小加倍到我不可见的 SizedBox 中，这样我们的 Red Box 和 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,
          ),
        ),
      ],
    ),
  ),
);

【参考方案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,
              ),),
          ],
)

输出：