如何在Flutter中实现容器填充滑动动画：点击展开并关闭其他容器

核心思路 #

放弃SizeTransition，改用AnimatedContainer配合状态管理，直接控制每个容器的尺寸变化，同时通过点击事件维护展开状态，确保同一时间仅一个容器处于展开状态，实现平滑的填充滑动动画。

具体实现代码 #

import 'package:flutter/material.dart';

class PaymentTierScreen extends StatefulWidget {
  const PaymentTierScreen({super.key});

  @override
  State<PaymentTierScreen> createState() => _PaymentTierScreenState();
}

class _PaymentTierScreenState extends State<PaymentTierScreen> {
  // 记录当前展开的层级索引，null表示全部收起
  int? _expandedIndex;
  // 定义收起/展开状态的高度
  final double _collapsedHeight = 80;
  final double _expandedHeight = 200;

  // 切换展开状态的逻辑
  void _toggleExpand(int index) {
    setState(() {
      _expandedIndex = _expandedIndex == index ? null : index;
    });
  }

  // 构建单个支付层级容器
  Widget _buildTierContainer(int index, String title, Color color) {
    bool isExpanded = _expandedIndex == index;
    return GestureDetector(
      onTap: () => _toggleExpand(index),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        height: isExpanded ? _expandedHeight : _collapsedHeight,
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              // 仅展开时显示详情内容
              if (isExpanded)
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: const [
                        Text("层级专属权益", style: TextStyle(color: Colors.white70)),
                        SizedBox(height: 8),
                        Text("更多功能说明", style: TextStyle(color: Colors.white70)),
                      ],
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("支付层级")),
      body: Column(
        children: [
          _buildTierContainer(0, "基础版", Colors.blueAccent),
          _buildTierContainer(1, "专业版", Colors.purpleAccent),
          _buildTierContainer(2, "企业版", Colors.greenAccent),
        ],
      ),
    );
  }
}

关键细节说明 #

• AnimatedContainer：通过修改height属性，搭配duration和curve实现平滑的尺寸过渡，相比SizeTransition更灵活，能直接绑定容器的展开/收起状态。
• 状态控制：用_expandedIndex跟踪当前展开的容器，点击时更新状态，自动关闭其他已展开的容器。
• 扩展空间：如果需要更复杂的填充动画（比如宽度变化、内部元素的渐显效果），可以在AnimatedContainer中添加width、opacity等可动画属性，或结合AnimatedBuilder自定义动画曲线。

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