如何在Flutter中一次只扩展一个ExpansionTile

在Flutter中，可以使用ExpansionTile小部件来创建可展开和折叠的列表项。ExpansionTile是一个带有标题和内容的小部件，当用户点击标题时，内容会展开或折叠。

要在Flutter中一次只扩展一个ExpansionTile，可以使用ExpansionPanelList小部件结合ExpansionPanel小部件来实现。ExpansionPanelList是一个小部件，它接受一个ExpansionPanel的列表，并根据用户的交互来展开或折叠这些面板。

下面是在Flutter中一次只扩展一个ExpansionTile的步骤：

导入所需的包：

import 'package:flutter/material.dart';

创建一个StatefulWidget来管理ExpansionPanelList的状态：

class MyExpansionPanelList extends StatefulWidget {
  @override
  _MyExpansionPanelListState createState() => _MyExpansionPanelListState();
}

在State类中定义一个列表来存储ExpansionPanel的状态：

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(),
    );
  }
}

创建一个Item类来表示ExpansionPanel的状态：

class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

创建一个函数来生成ExpansionPanel的状态列表：

List<Item> generateItems() {
  return List<Item>.generate(1, (int index) {
    return Item(
      headerValue: 'ExpansionTile',
      expandedValue: 'ExpansionTile的内容',
    );
  });
}

在主函数中使用MyExpansionPanelList小部件：

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会展开，其他的会折叠起来。

腾讯云相关产品和产品介绍链接地址：