首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在颤动中折叠其他ExpansionTile元素

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

要在颤动中折叠其他ExpansionTile元素,可以使用ExpansionPanelList小部件。ExpansionPanelList小部件是一个带有多个ExpansionPanel的列表,每个ExpansionPanel都可以展开或折叠。

下面是一个示例代码,演示如何在颤动中折叠其他ExpansionTile元素:

代码语言:txt
复制
import 'package:flutter/material.dart';

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

class _MyExpansionPanelListState extends State<MyExpansionPanelList> {
  List<Item> _data = generateItems(5);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _data.map<Widget>((Item item) {
        return ExpansionPanelList(
          elevation: 1,
          expandedHeaderPadding: EdgeInsets.all(0),
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              item.isExpanded = !isExpanded;
              _data.forEach((otherItem) {
                if (otherItem != item) {
                  otherItem.isExpanded = false;
                }
              });
            });
          },
          children: [
            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(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Expansion Panel List'),
      ),
      body: MyExpansionPanelList(),
    ),
  ));
}

在这个示例中,我们创建了一个MyExpansionPanelList小部件,它继承自StatefulWidget。在build方法中,我们使用ListView来显示ExpansionPanelList的列表。每个ExpansionPanelList都有一个expansionCallback回调函数,用于处理展开/折叠事件。在回调函数中,我们更新数据源中的isExpanded属性,并将其他ExpansionPanel的isExpanded属性设置为false,以实现在颤动中折叠其他ExpansionTile元素的效果。

这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券