首页 > 其他分享 >一统天下 flutter - widget 列表类: ExpansionTile - 列表项(可展开)

一统天下 flutter - widget 列表类: ExpansionTile - 列表项(可展开)

时间:2023-04-10 09:13:44浏览次数:44  
标签:widget const title 列表 Colors 展开 flutter siteMap

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 列表类: ExpansionTile - 列表项(可展开)

示例如下:

lib\widget\list\expansion_tile.dart

/*
 * ExpansionTile - 列表项(可展开)
 */

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../../helper.dart';

class ExpansionTileDemo extends StatefulWidget {
  const ExpansionTileDemo({Key? key}) : super(key: key);

  @override
  _ExpansionTileDemoState createState() => _ExpansionTileDemoState();
}

class _ExpansionTileDemoState extends State<ExpansionTileDemo> {
  List<Node>? _siteMap;

  Future<void> _loadSiteMap() async {
    await Future.delayed(const Duration(milliseconds: 1000));
    _siteMap = <Node>[];

    var str = await rootBundle.loadString('assets/README.md');
    var list = str.split("\n");
    Node? n;
    for (int i = 0; i < list.length; i++) {
      var line = list[i];
      if (line.startsWith("###")) {
        n = Node(line.substring(4).trim(), "", <Node>[]);
        _siteMap!.add(n);
      } else if (n != null && line.contains(". ")) {
        n.node.add(Node(
            line.trim(),
            list[++i].substring(list[i].indexOf("-") + 2).trim().replaceAll("/", "."),
            <Node>[]
        ));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("title"),
      ),
      body: FutureBuilder(
          future: _loadSiteMap(),
          builder: (context, snapshot) {
            if (snapshot.connectionState != ConnectionState.done) {
              return const Center(child: CircularProgressIndicator(),);
            }

            return ListView.separated(
              itemCount: _siteMap!.length,
              separatorBuilder: (BuildContext context, int index) {
                return const Divider(thickness: 1.0, height: 1.0, color: Colors.white);
              },
              itemBuilder: (context, index) {
                return ExpansionTile(
                  /// 初始时是否为展开状态
                  initiallyExpanded: false,
                  /// 标题
                  title: Text(
                    _siteMap![index].title,
                  ),
                  /// 标题的内边距
                  tilePadding: EdgeInsets.zero,
                  /// 左侧组件
                  leading: null,
                  /// 右侧组件
                  trailing: null,
                  /// title 下面的组件
                  subtitle: null,
                  /// 收缩状态时的背景颜色
                  collapsedBackgroundColor: Colors.red,
                  /// 收缩状态时的文本颜色
                  collapsedTextColor: Colors.white,
                  /// 收缩状态时的图标颜色
                  collapsedIconColor: Colors.white,
                  /// 展开状态时的背景颜色
                  backgroundColor: Colors.yellow,
                  /// 展开状态时的文本颜色
                  textColor: Colors.black,
                  /// 展开状态时的图标颜色
                  iconColor: Colors.black,
                  /// 展开/收缩时触发的事件(其中的 value 值用于说明当前是否是展开状态)
                  onExpansionChanged: (value) => log("onExpansionChanged:$value"),
                  /// 展开/收缩时,是否保持展开列表中的内容的状态
                  maintainState: false,
                  children: _siteMap![index].node.map((e) =>
                      Container(
                        alignment: Alignment.centerLeft,
                        color: Colors.orange,
                        child: Padding(
                          padding: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
                          child: Text(
                            e.title,
                            textAlign: TextAlign.left,
                            style: const TextStyle(
                              fontSize: 16,
                              color: Colors.white,
                              backgroundColor: Colors.transparent,
                            ),
                          ),
                        ),
                      ),
                  ).toList(),
                );
              },
            );
          }
      ),
    );
  }
}

class Node {
  String title;
  String url;
  List<Node> node;
  Node(this.title, this.url, this.node);
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,const,title,列表,Colors,展开,flutter,siteMap
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_list_expansion_tile.html

相关文章

  • 一统天下 flutter - widget 状态管理: 状态管理 - 自定义 controller
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget状态管理:状态管理-自定义controller示例如下:lib\state\controller.dart/**状态管理-自定义controller**为自定义组件指定一个自定义controller后,就可......
  • 一统天下 flutter - 插件: flutter 与 android 原生之间的数据通信
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-插件:flutter与android原生之间的数据通信示例如下:lib\plugin\plugin.dart/**插件*本例用于演示flutter与android/ios原生之间的数据通信**一、android插件......
  • axios写了前端,如何从后台获取到List列表数据(涉及到JSON)
    问题描述我将前端写完之后,一直没有理解axios后台的写法,导致进度一直拖慢,这里我就来叙述一下我后来是怎么写出后台代码的吧,或者说,这样的后台代码是怎么写出来的!问题解决经过友友的点拨,这里就需要将我们的list数据转换成json数据;然后将转换好的json数据传到axios写出来的html页......
  • 解决Flutter_Boost,在Android Studio 出现“Cannot resolve symbol” 的问题
    今天在调试的时候,Android Studio报了一个莫名其妙的错误Cannot resolve symbol'R'让人不知所措,怎么会出现 Cannot resolve symbol 这种错误呢?下面给大家分享Android Studio 出现“Cannot resolve symbol”解决方案,需要的朋友可以参考下一:AndroidStudio无法识别同......
  • 从百度搜索结果列表里点击 CSDN 博客时 url 参数的含义
    我在百度里根据某关键字搜索后,在结果列表里找到CSDN某篇博客,点击之后,进入博客页面,注意到地址栏里的url很长:https://blog.csdn.net/i042416/article/details/117606987?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168086484016800182795826%2522%252C%2522scm%......
  • 修改元祖内的列表
    '''元组学生("fqs",11,["football","music"])1.查询年龄所在的下标2.查询学生姓名3.删除学生爱好中的football4.增加爱好coding'''#定义方法defget_student():tuple_student=("fqs",11,["football","mus......
  • 找出列表中偶数放到新列表中
    '''求列表中的偶数,并放到新的列表中'''#定义方法defget_ou():list_num=[1,2,3,4,5]list_ou=[]index=0whileindex<len(list_num):iflist_num[index]%2==0:print(f"偶数{list_num[index]}")......
  • Flutter Dart数组固定长度分割成二维数组
    将dart数组按照指定的长度分割,返回一个二维数组,实现list的split功能.例如:a=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]splitList(a,6):[[0,1,2,3,4,5],[6,7,8,9,10,11],[12,13,14,15,16,17],[18,19]] Dart方法代码:......
  • Python源码笔记——Python中的列表对象
    1.列表结构体#definePyObject_VAR_HEADPyVarObjectob_base;typedefstruct{PyObjectob_base;Py_ssize_tob_size;/*Numberofitemsinvariablepart*/}PyVarObject;typedefstruct{PyObject_VAR_HEAD/*Vectorofpointerstolistel......
  • multiple definition of `MainWindow::MainWindow(QWidget*)
     qt刚建好工程运行的时候没问题,后面写了一点东西之后,再运行就发现出现MainWindow重复,我不理解。  解决方法:删除重复的引用。 再重新构建一下就好了。 ......