Flutter中如何让AnimatedContainer向下而非向上展开？

点击箭头时，希望展开的内容和容器都向下延伸，但目前是向上展开的。尝试设置Alignment和AlignmentDirectional为bottomCenter但无效，代码实现如下：

Positioned(
  bottom: 20,
  left: 20,
  child: GestureDetector(
    onTap: () {
      setState(() {
        isExpanded = !isExpanded;
      });
    },
    child: AnimatedContainer(
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      height: isExpanded ? 200 : 100,
      width: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.grey[200]!,
            Colors.grey[300]!,
          ],
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 10.0),
      child: Column(
        children: <Widget>[
          Text(
            'Text at the Top',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Container(
            height: 1.0,
            color: Colors.grey,
            margin: EdgeInsets.symmetric(vertical: 10.0),
          ),
          if (isExpanded)
            Expanded(
              child: Container(
                padding: EdgeInsets.all(10.0),
                child: Text(
                  'Expanded content goes here.',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
            ),
          Transform.rotate(
            angle: isExpanded ? 0.5 * 3.14 : 0,
            child: Icon(
              Icons.arrow_drop_down,
              size: 30.0,
            ),
          ),
        ],
      ),
    ),
  ),
),

未展开效果 #

展开效果 #

问题根源在于Positioned固定了bottom属性：容器底部距离屏幕底部始终为20，当容器高度增加时，只能向上扩展。要实现向下延伸，需要固定容器的顶部位置，让底部随高度增加自然下移。

修改步骤： #

1. 获取屏幕高度，用于计算容器的顶部位置
2. 将Positioned的bottom:20替换为动态计算的top值，确保未展开时容器底部距离屏幕底部20，展开时顶部位置不变，底部向下延伸

修改后的代码：

final screenHeight = MediaQuery.of(context).size.height;

Positioned(
  // 未展开时，容器顶部 = 屏幕高度 - 容器高度 - 底部间距
  top: screenHeight - (isExpanded ? 200 : 100) - 20,
  left: 20,
  child: GestureDetector(
    onTap: () {
      setState(() {
        isExpanded = !isExpanded;
      });
    },
    child: AnimatedContainer(
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      height: isExpanded ? 200 : 100,
      width: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.grey[200]!,
            Colors.grey[300]!,
          ],
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 10.0),
      child: Column(
        children: <Widget>[
          Text(
            'Text at the Top',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Container(
            height: 1.0,
            color: Colors.grey,
            margin: EdgeInsets.symmetric(vertical: 10.0),
          ),
          if (isExpanded)
            Expanded(
              child: Container(
                padding: EdgeInsets.all(10.0),
                child: Text(
                  'Expanded content goes here.',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
            ),
          Transform.rotate(
            angle: isExpanded ? 0.5 * 3.14 : 0,
            child: Icon(
              Icons.arrow_drop_down,
              size: 30.0,
            ),
          ),
        ],
      ),
    ),
  ),
),

补充说明： #

• 若希望容器展开后不超出屏幕，可将容器放在SingleChildScrollView中，或调整展开后的高度，确保top + 展开高度 <= screenHeight
• 如果你的布局是在可滚动页面中，也可以直接固定top为某个固定值（如screenHeight - 120），展开时高度增加，自然向下延伸

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