Flutter Stack是否有类似mainAxisAlignment的属性？如何实现蓝色柱状图底部对齐？

1. Stack组件是否有类似mainAxisAlignment的属性？ #

Stack本身没有mainAxisAlignment属性，但可以通过以下方式实现类似的对齐效果：

• 使用Stack的alignment属性（如Alignment.bottomCenter、Alignment.topLeft等），控制未添加定位的子组件的整体对齐方式；
• 结合Positioned组件精确控制单个子组件的位置；
• 使用Align组件包裹子组件，单独为该子组件设置对齐规则。

2. 蓝色柱状条底部对齐的解决方案 #

你的蓝色柱状条通过FractionallySizedBox实现，默认会从Stack顶部开始布局，要改为底部对齐，有两种简单可行的修改方式：

方式一：设置Stack的alignment属性 #

直接给Stack添加alignment: Alignment.bottomCenter，未定位的FractionallySizedBox会自动底部对齐：

Container(
  height: 64,
  width: 10,
  child: Stack(
    alignment: Alignment.bottomCenter, // 添加此行
    children: [
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          color: Color.fromRGBO(220, 220, 220, 1),
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      FractionallySizedBox(
        heightFactor: spendingPctOfTotal,
        child: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).primaryColor,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
    ],
  ),
),

方式二：用Positioned包裹FractionallySizedBox #

通过Positioned固定柱状条在Stack底部，同时让它左右填满容器宽度，保证和背景容器对齐：

Container(
  height: 64,
  width: 10,
  child: Stack(
    children: [
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          color: Color.fromRGBO(220, 220, 220, 1),
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: FractionallySizedBox(
          heightFactor: spendingPctOfTotal,
          child: Container(
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ),
      ),
    ],
  ),
),

这两种方式都能让蓝色柱状条从Stack底部开始向上延伸，不会破坏原有布局。

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