Flutter中如何让Column高度变化时底部锚定而非顶部？

要实现底部元素固定、上部元素随AnimatedContainer高度变化上下移动，核心是调整Column的布局对齐逻辑，让布局从底部向上排列，具体实现方式如下：

• 给外层Column设置mainAxisAlignment: MainAxisAlignment.end，让子元素从屏幕底部开始向上排布
• 将需要固定在底部的Widget放在Column的children列表末尾
• 将包含AnimatedContainer的上部内容放在children列表前端，若上部内容需要占据屏幕剩余空间，用Expanded包裹（避免底部元素被挤压）

示例代码：

class BottomFixedDemo extends StatefulWidget {
  @override
  _BottomFixedDemoState createState() => _BottomFixedDemoState();
}

class _BottomFixedDemoState extends State<BottomFixedDemo> {
  double _animatedHeight = 100;

  void _toggleHeight() {
    setState(() {
      _animatedHeight = _animatedHeight == 100 ? 200 : 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end, // 关键：从底部开始布局
        children: [
          // 上部可变化内容：包含AnimatedContainer
          Expanded(
            child: Column(
              children: [
                Text('上部内容，会随高度变化移动'),
                AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  height: _animatedHeight,
                  color: Colors.lightBlueAccent,
                  child: const Center(child: Text('动态高度容器')),
                ),
              ],
            ),
          ),
          // 底部固定内容
          Container(
            height: 60,
            width: double.infinity,
            color: Colors.orange,
            child: TextButton(
              onPressed: _toggleHeight,
              child: const Text('切换容器高度', style: TextStyle(color: Colors.white)),
            ),
          ),
        ],
      ),
    );
  }
}

如果上部内容无需滚动，直接移除Expanded即可；若需要支持滚动，将上部的Column用SingleChildScrollView包裹（无需设置reverse参数），再配合Expanded使用。

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