如何使用Flutter开发包含可展开区块/列的UI界面

方案1：使用官方内置ExpansionTile（快速实现） #

这是最便捷的实现方式，默认自带展开动画和箭头交互，适合大部分基础场景：

ExpansionTile(
  title: const Text('区块标题'),
  // 自定义头部左侧图标，不需要可以删掉
  leading: const Icon(Icons.info),
  // 展开后显示的子内容
  children: const [
    ListTile(title: Text('展开内容1')),
    ListTile(title: Text('展开内容2')),
    ListTile(title: Text('展开内容3')),
  ],
  // 处理展开/收起的状态回调
  onExpansionChanged: (bool expanded) {
    // 在这里写状态变化后的业务逻辑
  },
)

如果需要修改默认的箭头样式、背景色等属性，可以直接调整ExpansionTile的对应参数，比如iconColor、textColor、backgroundColor等。

方案2：自定义可展开组件（适配复杂设计） #

如果官方组件的样式无法匹配你的设计稿需求，可以通过StatefulWidget + AnimatedContainer手动实现完全自定义的展开效果：

class CustomExpansionTile extends StatefulWidget {
  final Widget header;
  final Widget expandContent;
  const CustomExpansionTile({super.key, required this.header, required this.expandContent});

  @override
  State<CustomExpansionTile> createState() => _CustomExpansionTileState();
}

class _CustomExpansionTileState extends State<CustomExpansionTile> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 头部点击区域
        GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: widget.header,
        ),
        // 可展开内容区域
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          height: _isExpanded ? null : 0,
          child: widget.expandContent,
        )
      ],
    );
  }
}

使用的时候直接传入自定义的头部和展开内容即可，完全适配你的设计稿样式要求。

注意事项：

• 如果是在列表中使用多个可展开项，记得给每个项配置唯一的Key，避免状态混乱
• 展开动画的时长、动画曲线可以根据设计需求自行调整

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