在Flutter中,可以使用ExpansionTile小部件来创建可展开和折叠的列表项。ExpansionTile是一个带有标题和内容的小部件,当用户点击标题时,内容会展开或折叠。
要在Flutter中一次只扩展一个ExpansionTile,可以使用ExpansionPanelList小部件结合ExpansionPanel小部件来实现。ExpansionPanelList是一个小部件,它接受一个ExpansionPanel的列表,并根据用户的交互来展开或折叠这些面板。
下面是在Flutter中一次只扩展一个ExpansionTile的步骤:
import 'package:flutter/material.dart';
class MyExpansionPanelList extends StatefulWidget {
@override
_MyExpansionPanelListState createState() => _MyExpansionPanelListState();
}
class _MyExpansionPanelListState extends State<MyExpansionPanelList> {
List<Item> _items = generateItems(); // 用于存储ExpansionPanel的状态的列表
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: EdgeInsets.all(0),
expansionCallback: (int index, bool isExpanded) {
setState(() {
_items[index].isExpanded = !isExpanded;
});
},
children: _items.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}
class Item {
Item({
required this.expandedValue,
required this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems() {
return List<Item>.generate(1, (int index) {
return Item(
headerValue: 'ExpansionTile',
expandedValue: 'ExpansionTile的内容',
);
});
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ExpansionTile Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('ExpansionTile Demo'),
),
body: MyExpansionPanelList(),
),
);
}
}
这样,你就可以在Flutter中创建一个只能同时展开一个ExpansionTile的列表了。每次点击ExpansionTile的标题时,只有一个ExpansionTile会展开,其他的会折叠起来。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云