居中-在列中对齐一个 Flutter 微件,并将其余微件放置在其周围

byqmnocz  于 2023-01-18  发布在  Flutter
关注(0)|答案(2)|浏览(103)

如何将一列中的一个小部件居中对齐,并将其余小部件围绕在其周围?
如果我有一个容器或持有三个输入字段和按钮,另一个是上面的框,我如何对齐容器在中间,并把框在剩余的空间,而不移动中心容器?

我尝试使用扩展或灵活,但不知道如何以这种方式对齐小部件。

dtcbnfnu

dtcbnfnu1#

可以像这样使用Column

Column(
    children: [
      Expanded(
          child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          height: 40,
          width: 40,
          color: Colors.yellow,
        ),
      )),
      Container(
        color: Colors.red,
        height: 100,
        width: double.infinity,
      ),
      Expanded(
          child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          height: 40,
          width: 40,
          color: Colors.green,
        ),
      )),
    ],
  ),

ljsrvy3e

ljsrvy3e2#

下面是一个示例,说明如何将中心容器与三个输入字段、一个按钮以及上方的框对齐:'

Column(
    children: [
        Expanded(
            child: FractionallySizedBox(
                widthFactor: 0.8,
                child: Center(
                    child: Container(
                        child: Column(
                            children: [
                                // Three input fields
                                // Button
                            ],
                        ),
                    ),
                ),
            ),
        ),
        // Box above
    ],
)

相关问题