先上效果图:
展开之前:
header的内容:
在这里插入图片描述
展开之后:
header中的内容:
在这里插入图片描述
具体的使用很简单,直接上代码:

class ExpandableList extends StatefulWidget {
  @override
  _ExpandableListState createState() => _ExpandableListState();
}

class _ExpandableListState extends State<ExpandableList> {
  //生成一组测试数据
  final list = List.generate(10, (i)=>"这是第$i个item数据");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(  //build的item为header的内容
        itemBuilder: (context, index) {
          return ExpansionTile(
            title: Text("这是第$index个"),
            children: list.map((f) => ListTile(title: Text(f))).toList(),
          );
        },
        itemCount: 5,
      ),
    );
  }
}
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐