ExpansionTile组件的具体用法
ExpansionTile
是 Flutter 中用于创建可展开列表项的组件。它通常用于显示可折叠的信息,这样用户可以选择查看或隐藏详细信息。以下是 ExpansionTile
的具体用法及一些示例:
基本用法
ExpansionTile
组件包含主要的属性,如 title
、children
、leading
、trailing
、backgroundColor
等。
主要属性:
title
: 显示在折叠状态下的标题。通常是一个Text
小部件。children
: 展开时显示的子小部件列表。leading
: 标题前显示的小部件,通常是一个图标。trailing
: 在标题后显示的小部件,通常是一个箭头图标。backgroundColor
: 展开部分的背景颜色。onExpansionChanged
: 展开状态改变时的回调。initiallyExpanded
: 控制ExpansionTile
初始是否展开的布尔值。
示例代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("ExpansionTile Example"),
),
body: ListView(
children: <Widget>[
ExpansionTile(
leading: Icon(Icons.info),
title: Text("Expandable Tile"),
trailing: Icon(Icons.arrow_drop_down),
backgroundColor: Colors.grey.shade200,
children: <Widget>[
ListTile(
title: Text("Item 1"),
),
ListTile(
title: Text("Item 2"),
),
ListTile(
title: Text("Item 3"),
),
],
onExpansionChanged: (bool expanded) {
print(expanded ? "Expanded" : "Collapsed");
},
initiallyExpanded: false,
),
],
),
),
);
}
}
注意事项:
ExpansionTile
常用于列表中,特别是需要显示隐藏数据的地方。- 当
ExpansionTile
包含的内容较多时,建议放置在ListView
或SingleChildScrollView
中,以使得所有内容都可以滚动查看。 - 可以自定义
trailing
图标或内容来改变展开/折叠的视觉元素。
通过这些信息,你可以在 Flutter 应用中有效地使用 ExpansionTile
组件来增强用户界面。