flutter实现折叠卡片

### 如何在 Flutter 中创建可折叠的卡片组件 #### 使用 `ExpansionTile` 组件 Flutter 提供了内置的 `ExpansionTile` 组件，该组件非常适合用来创建简单的可折叠效果。当用户点击标题时，内容区域会展开或收起。 ```dart import 'package:flutter/material.dart'; class ExpandableCardExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Expandable Card Example')), body: ListView.builder( itemCount: 5, itemBuilder: (context, index) => ExpansionTile( title: Text("Item ${index + 1}"), children: [ ListTile( leading: Icon(Icons.info), title: Text("This is item number ${index + 1}."), ), ], ), ), ); } } ``` 此代码片段展示了如何利用 `ListView.builder` 创建多个带有编号的 `ExpansionTile`[^1]。 #### 自定义可折叠动画卡牌 对于更复杂的需求，比如想要自定义展开/收缩动画，则可以通过组合 `AnimatedContainer`, `GestureDetector` 及其他基础部件来自定义实现： ```dart import 'package:flutter/material.dart'; import 'dart:math' as math; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: HomeScreen()); } } class HomeScreen extends StatefulWidget { _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin { bool isOpen = false; void toggleOpen(){ setState(() {isOpen=!isOpen;}); } double getHeight(bool open){ return open ? 200 : 80 ; } Color getColor(bool open){ return open? Colors.blueAccent :Colors.grey.shade300; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: GestureDetector( onTap: (){toggleOpen();}, child: AnimatedContainer( duration: Duration(milliseconds: 400), curve: Curves.easeInOut, height:getHeight(isOpen), width: MediaQuery.of(context).size.width * .9 , decoration: BoxDecoration(color:getColor(isOpen)), alignment: Alignment.center, padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children:[ Text('Title',style: TextStyle(fontSize: 24,color: Colors.white),), if(isOpen)...[ Padding(padding:EdgeInsets.only(top:8,bottom:8)), Text('Description goes here...', style:TextStyle(fontSize: 16)) ] ]), ) ) ) ); } } ``` 上述例子通过监听手势事件触发状态变化，并借助于 `AnimatedContainer` 来平滑过渡高度属性的变化从而达到视觉上的伸缩效果[^2].