原文
https://medium.flutterdevs.co...
参考
- https://api.flutter.dev/flutt...
注释
理解如何在您的 Flutter 应用程序创立一个扩大面板列表
在本文中，咱们将探讨 ExpansionPanelList In Flutter. 。咱们将施行一个扩大面板列表演示程序，并学习如何自定义其格调与不同的属性在您的 Flutter 应用程序。
Expansion Panel List:
它是一个相似于 listView 的实质性 Flutter 小部件。它能够只有扩大面板作为儿童。在某些状况下，咱们可能须要显示一个列表，其中子元素能够开展/折叠以显示/暗藏一些具体的数据。为了显示这样的列表 flutter，提供了一个名为 ExapansionPanelList 的小部件。
在这个列表中，每个子元素都是 expsionpanel 小部件。在这个列表中，咱们不能应用不同的窗口小部件作为子窗口。咱们能够借助于 expsioncallback 属性来解决事物的状态调整(扩大或解体)。
演示模块:
这个演示视频显示了如何在一个 Flutter 扩大面板清单。它显示如何扩大面板列表将工作在您的 Flutter 应用程序。它显示了一个列表，在这个列表中孩子们能够开展/折叠以显示/暗藏一些详细信息。它会显示在你的设施上。
Constructor:
要应用 ExpansionPanelList，须要调用上面的构造函数:
const ExpansionPanelList({ Key? key, this.children = const <ExpansionPanel>[], this.expansionCallback, this.animationDuration = kThemeAnimationDuration, this.expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding, this.dividerColor, this.elevation = 2,})Properties:
ExpansionPanelList 的一些属性如下:
- > children: 此属性用于扩大面板 List 的子元素。它们的布局相似于[ListBody]。
- > expansionCallback: 此属性用于每当按下一个开展/折叠按钮时调用的回调。传递给回调的参数是按下的面板的索引，以及面板以后是否开展。
- > animationDuration: 这个属性用于开展或折叠时，咱们能够察看到一些动画在肯定工夫内产生。咱们能够通过应用扩大面板 List 的 animationDuration 属性来更改持续时间。咱们只须要提供以微秒、毫秒或分钟为单位的持续时间值。
- > expandedHeaderPadding: 此属性用于开展时围绕面板标头的填充。默认状况下，16px 的空间是在扩大期间垂直增加到题目(下面和上面)。
- > dividerColor: 当[ expsionpanel.isexpanded ]为 false 时，此属性用于定义分隔符的色彩。如果‘ dividerColor’为空，则应用[ DividerThemeData.color ]。如果为 null，则应用[ ThemeData.dividerColor ]。
- > elevation: 此属性用于在扩大时定义[ expsionpanel ]的晋升。这应用[ kElevationToShadow ]来模仿暗影，它不应用[ Material ]的任意高度个性。默认状况下，仰角的值为 2。
如何实现 dart 文件中的代码:
你须要别离在你的代码中实现它:
在lib文件夹中创立一个名为main.dart的新 dart 文件。
首先，咱们将生成虚构数据。咱们将创立一个列表 <Map<String, dynamic>> 并增加变量 \_ items 等于生成一个列表。在这个列表中，咱们将增加 number、 id、 title、 description 和 isExpanded。
List<Map<String, dynamic>> _items = List.generate( 10, (index) => { 'id': index, 'title': 'Item $index', 'description': 'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.', 'isExpanded': false });在注释中，咱们将增加 ExpansionPanelList() 小部件。在这个小部件中，咱们将增加标高为 3，在括号中增加 expsioncallback 索引和 isExpanded。咱们将增加 setState ()办法。在办法中，咱们将增加 \_ items index equal not isExpanded。
ExpansionPanelList( elevation: 3, expansionCallback: (index, isExpanded) { setState(() { _items[index]['isExpanded'] = !isExpanded; }); }, animationDuration: Duration(milliseconds: 600), children: _items .map( (item) => ExpansionPanel( canTapOnHeader: true, backgroundColor: item['isExpanded'] == true ? Colors._cyan_[100] : Colors._white_, headerBuilder: (_, isExpanded) => Container( padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30), child: Text( item['title'], style: TextStyle(fontSize: 20), )), body: Container( padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30), child: Text(item['description']), ), isExpanded: item['isExpanded'], ), ) .toList(),),咱们将减少 animationDuration 为 600 毫秒。咱们将增加子节点，因为 variable_items 映射到 expsionpanel ()小部件。在这个小部件中，咱们将增加 canTapOnHeader was true，backgroundColor，headerBuilder 返回 Container ()小部件。在这个小部件中，咱们将增加填充，并在其子属性上增加文本。在注释中，咱们将增加 Conatiner 及其子属性，咱们将增加文本。当咱们运行应用程序时，咱们应该取得屏幕输入，就像上面的屏幕截图一样。
全副代码
import 'package:flutter/material.dart';import 'package:flutter_expansion_panel_list/splash_screen.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors._teal_, ), home: Splash()); }}class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override _HomePageState createState() => _HomePageState();}class _HomePageState extends State<HomePage> { List<Map<String, dynamic>> _items = List.generate( 10, (index) => { 'id': index, 'title': 'Item $index', 'description': 'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.', 'isExpanded': false }); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: false, title: Text('Flutter Expansion Panel List Demo'), ), body: SingleChildScrollView( child: ExpansionPanelList( elevation: 3, // Controlling the expansion behavior expansionCallback: (index, isExpanded) { setState(() { _items[index]['isExpanded'] = !isExpanded; }); }, animationDuration: Duration(milliseconds: 600), children: _items .map( (item) => ExpansionPanel( canTapOnHeader: true, backgroundColor: item['isExpanded'] == true ? Colors._cyan_[100] : Colors._white_, headerBuilder: (_, isExpanded) => Container( padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30), child: Text( item['title'], style: TextStyle(fontSize: 20), )), body: Container( padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30), child: Text(item['description']), ), isExpanded: item['isExpanded'], ), ) .toList(), ), ), ); }}结语
在本文中，我曾经简略地解释了 ExpansionPanelList 的根本构造; 您能够依据本人的抉择批改这段代码。这是一个小的介绍扩大/panellist On User Interaction 从我这边，它的工作应用 Flutter。
© 猫哥
- 微信 ducafecat
- 博客 ducafecat.tech
- github
- bilibili