Flutter如何将组件对齐到容器右下角 Positioned失效解决方案

上图是需要实现的最终UI效果：外层圆角容器内，左侧为固定尺寸的圆角块，右侧的小型蓝色按钮需要对齐到容器右下角位置。
之前尝试使用Positioned组件实现右下角对齐未生效，实际运行效果如下：

当前代码运行后，右侧蓝色小按钮默认和左侧组件垂直居中对齐，未达到预期效果。

现有问题代码 #

Scaffold(
      backgroundColor: bgColor,
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(28.0),
            child: Container(
              height: 190,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                color: containerColor,
              ),
              child: Row(
                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(28.0),
                    child: Container(
                      height: 130,
                      width: 140,
                      decoration: BoxDecoration(
                          color: bgColor,
                          borderRadius: BorderRadius.circular(20)),
                    ),
                  ),
                  Container(
                    height: 30,
                    width: 60,
                    decoration: BoxDecoration(
                      color: themeBlueColor,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      )),
    );

问题原因 #

Positioned 仅能作为 Stack 的直接子组件生效，直接在 Row 层级下使用不会有任何定位效果。同时Row默认的交叉轴对齐规则是CrossAxisAlignment.center，所以右侧按钮会默认和左侧组件垂直居中排布。

修复方案 #

两种实现方式任选即可：

方案1：利用Row原生对齐属性（代码最简洁） #

直接给外层Row补充两个配置：

• 主轴对齐设置为MainAxisAlignment.spaceBetween，让左右两个组件分别靠Row的左右两端排布
• 交叉轴对齐设置为CrossAxisAlignment.end，让所有子组件对齐Row的底部
  最后给右侧小按钮补充和左侧一致的右下内边距，避免按钮贴死容器边缘，和整体边距风格统一。

修改后对应代码片段：

child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Padding(
      padding: const EdgeInsets.all(28.0),
      child: Container(
        height: 130,
        width: 140,
        decoration: BoxDecoration(
            color: bgColor,
            borderRadius: BorderRadius.circular(20)),
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(right: 28, bottom: 28),
      child: Container(
        height: 30,
        width: 60,
        decoration: BoxDecoration(
          color: themeBlueColor,
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    ),
  ],
),

方案2：用Stack+Positioned实现（位置控制更灵活） #

如果习惯用绝对定位的写法，直接把外层Row换成Stack，再用Positioned把右侧按钮固定在右下角即可：

child: Stack(
  children: [
    Padding(
      padding: const EdgeInsets.all(28.0),
      child: Container(
        height: 130,
        width: 140,
        decoration: BoxDecoration(
            color: bgColor,
            borderRadius: BorderRadius.circular(20)),
      ),
    ),
    Positioned(
      right: 28,
      bottom: 28,
      child: Container(
        height: 30,
        width: 60,
        decoration: BoxDecoration(
          color: themeBlueColor,
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    ),
  ],
),

两种方案最终渲染效果完全一致，日常开发优先选第一种，布局适配性更好。

内容的提问来源于stack exchange，提问作者pluto