Flutter中的ExpansionTile：可折叠的列表项

Flutter中的ExpansionTile：可折叠的列表项

5 回复

ExpansionTile是Flutter中可展开收起的列表项组件。

更多关于Flutter中的ExpansionTile：可折叠的列表项的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


ExpansionTile 是 Flutter 中的一个小部件，用于创建可展开和折叠的列表项，通常用于显示更多详细信息或子内容。

ExpansionTile 是 Flutter 中的一个部件，用于创建可折叠的列表项。它通常用于展示一个标题和子内容，用户可以点击标题来展开或折叠子内容。基本用法如下：

ExpansionTile(
  title: Text('标题'),
  children: <Widget>[
    ListTile(title: Text('子项1')),
    ListTile(title: Text('子项2')),
  ],
)

title 是显示在展开/折叠按钮旁边的文本，children 是展开后显示的内容。你还可以自定义 leading、trailing 等属性来进一步美化你的 ExpansionTile。

ExpansionTile是Flutter中可折叠展开的列表组件。

ExpansionTile 是 Flutter 中用于创建可折叠列表项的小部件。它允许用户展开或折叠一个列表项，以显示或隐藏更多的内容。ExpansionTile 通常用于创建具有层次结构的列表，比如设置菜单、FAQ 列表等。

基本用法

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: [
            ExpansionTile(
              title: Text('Section 1'),
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
              ],
            ),
            ExpansionTile(
              title: Text('Section 2'),
              children: <Widget>[
                ListTile(title: Text('Item 3')),
                ListTile(title: Text('Item 4')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

主要属性

  • title: 必填项，表示列表项的主要标题。
  • children: 必填项，表示展开后显示的内容，通常是一个 List<Widget>。
  • leading: 可选项，表示标题前面的图标或图片。
  • trailing: 可选项，表示标题后面的图标或图片。
  • initiallyExpanded: 可选项，表示初始状态是否展开，默认为 false。
  • onExpansionChanged: 可选项，展开或折叠时触发的回调函数。

自定义样式

你可以通过 ExpansionTile 的 backgroundColor、collapsedBackgroundColor 等属性来自定义其样式。

ExpansionTile(
  title: Text('Custom Styled Section'),
  backgroundColor: Colors.blue.withOpacity(0.1),
  collapsedBackgroundColor: Colors.red.withOpacity(0.1),
  children: <Widget>[
    ListTile(title: Text('Custom Item 1')),
    ListTile(title: Text('Custom Item 2')),
  ],
);

总结

ExpansionTile 是 Flutter 中非常实用的组件，特别适合用于需要展示和隐藏额外信息的场景。通过简单的配置，你可以轻松创建出功能丰富且美观的可折叠列表项。

回到顶部