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

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的丰富文档，TomekPolański先生还提供了explain布局的详细信息。

您必须了解行和列明智的方法 MainAxisAlignment ， CrossAxisAlignment ，

当您想放置有独生子女的东西时，请使用 FittedBox 或 ConstrainedBox 或 SizedBox

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

将您的容器包装在扩展小工具下，这将为您提供Flex属性，它有助于您为容器提供灵活性。扩展小部件也将有助于您的横向和纵向屏幕尺寸。
在您的Container Widgets中使用SizedBox Widget，它将为您提供最大宽度的不可见间隔Sized Box。
我将第一个Container（红色一个）设置为 flex 属性1，并将第二个Container（蓝色一个）设置为两个容器的行大小的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,
          ),
        ),
      ],
    ),
  ),
);

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

2 个答案: