Flutter：如何以不同方式对齐列中的两个项目

Question

我有一个像这样用 flutter 制作的专栏：

Container(
      width: width,
      height: width,
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FittedBox(child: Icon(Icons.cancel, size: 40)),
            FittedBox(child: Text("data")),
          ],
        ),
      ),
    );

但我希望 Icon 完全居中并且文本与橙色容器的底部对齐。有没有办法不使用 stack 来做到这一点？正如您在下图中看到的，图标和文本都居中对齐，因此图标没有完全居中。

感谢您的帮助。

Answer 1

对齐 widget 可能会有所帮助。让你的 Column 取其最大高度（由父 Container 决定）并用 Expanded 或 Flexible 包裹图标，然后用适当的 Align 包裹你的元素对齐值。

顺便说一句，这并没有实现完美居中，但它会尽可能接近它，因为你的文本很小。

Container(
    width: width,
    height: width,
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Flexible(
            child: Align(
                alignment: Alignment.center,
                child: Icon(Icons.cancel, size: 40))),
        Align(alignment: Alignment.bottomCenter, child: Text("data")),
      ],
    ),
  );

Answer 2

试一试

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Theme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Column(
      children: [
        Expanded(child: Container()),
        Expanded(
            child: Center(
                child: FittedBox(child: Icon(Icons.cancel, size: 40)))),
        Expanded(
            child: Align(
          alignment: Alignment.bottomCenter,
          child: FittedBox(
              child: Text(
            "data",
            style: TextStyle(fontSize: 25),
          )),
        )),
      ],
    ),
  ),

Answer 3

我最终选择了使用 Stack，因为它实际上是完成我想做的事情的最简单的方法...我是这样做的：

SizedBox(
          width: width,
          height: width,
          child: Stack(
            children: [
              Align(
                  alignment: Alignment.center,
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                      child: Icon(Icons.cancel, size: 40))),
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3),
                    child: FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          "data",
                        )),
                  )),
            ],
          ),
        ),

有了堆栈和对齐，它符合我想要做的... 感谢所有回答此问题的人的帮助 post。

Flutter：如何以不同方式对齐列中的两个项目

Flutter : How to align differently two items in a column

mobile

android

ios

dart

flutter