Flutter 可扩展的 Listview

您需要修改（分组）列表才能获得此结果

您可以在 dartpad 中运行它，我已经对其进行了编码，只需单击该链接即可。输出如下截图

import 'package:flutter/material.dart';
import "package:collection/collection.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Map<String, List<TestingObj>> groupedItemMap;

  List<TestingObj> testingItems = [
    TestingObj(
      "Book",
      "100000",
      "November",
    ),
    TestingObj(
      "Pencil",
      "100",
      "November",
    ),
    TestingObj(
      "Eraser",
      "1000",
      "December",
    ),
    TestingObj(
      "Ruler",
      "100000",
      "September",
    ),
    TestingObj(
      "Bag",
      "100000",
      "September",
    ),
    TestingObj(
      "Paper",
      "100000",
      "September",
    ),
  ];

  @override
  void initState() {
    groupedItemMap = groupBy(testingItems, (entry) => entry.month);

    print(groupedItemMap.toString());

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemBuilder: (context, index) => ExpansionTile(
                title: Text(
                  groupedItemMap.entries.elementAt(index).key,
                ),
                children: groupedItemMap.entries
                    .elementAt(index)
                    .value
                    .map((item) => Text(item.itemName))
                    .toList(),
              ),
          itemCount: groupedItemMap.length),
    );
  }
}

class TestingObj {
  final String itemName;
  final String profit;
  final String month;

  TestingObj(this.itemName, this.profit, this.month);
}

这是一个可展开的列表视图示例

main.dart

import 'package:expanded_listview_demo/subCategory.dart';
import 'package:flutter/material.dart';
import 'dataModel.dart';


void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}
 
 
class _MyAppState extends State<MyApp> {
  List<Menu> data = [];
 
  @override
  void initState() {
    dataList.forEach((element) {
      data.add(Menu.fromJson(element));
    });
    super.initState();
  }
  @override
   Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        drawer: _drawer(data),
        appBar: AppBar(
          title: const Text('Expandable ListView'),
        ),
        body: ListView.builder(
          itemCount: data.length,
          itemBuilder: (BuildContext context, int index) =>
              _buildList(data[index]),
        ),
      ),
    );
  }
 
  Widget _drawer (List<Menu> data){
    return Drawer(
        child: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
                UserAccountsDrawerHeader(margin: EdgeInsets.only(bottom: 0.0),
                    accountName: Text('demo'), accountEmail: Text('[email protected]')),
                ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: data.length,
                  itemBuilder:(context, index){return _buildList(data[index]);},)
              ],
            ),
          ),
        ));
  }
 
  Widget _buildList(Menu list) {
    if (list.subMenu.isEmpty)
      return Builder(
        builder: (context) {
          return ListTile(
              onTap:() => Navigator.push(context, MaterialPageRoute(builder: (context) => SubCategory(list.name))),
              leading: SizedBox(),
              title: Text(list.name)
          );
        }
      );
    return ExpansionTile(
      leading: Icon(list.icon),
      title: Text(
        list.name,
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      children: list.subMenu.map(_buildList).toList(),
    );
  }
}

DataModel 类

import 'package:flutter/material.dart';
 
List dataList = [
  {
    "name": "Sales",
    "icon": Icons.payment,
    "subMenu": [
      {"name": "Orders"},
      {"name": "Invoices"}
    ]
  },
  {
    "name": "Marketing",
    "icon": Icons.volume_up,
    "subMenu": [
      {
        "name": "Promotions",
        "subMenu": [
          {"name": "Catalog Price Rule"},
          {"name": "Cart Price Rules"}
        ]
      },
      {
        "name": "Communications",
        "subMenu": [
          {"name": "Newsletter Subscribers"}
        ]
      },
      {
        "name": "SEO & Search",
        "subMenu": [
          {"name": "Search Terms"},
          {"name": "Search Synonyms"}
        ]
      },
      {
        "name": "User Content",
        "subMenu": [
          {"name": "All Reviews"},
          {"name": "Pending Reviews"}
        ]
      }
    ]
  }
];
 
class Menu {
  String name;
  IconData icon;
  List<Menu> subMenu = [];
 
  Menu({this.name, this.subMenu, this.icon});
 
  Menu.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    icon = json['icon'];
    if (json['subMenu'] != null) {
      subMenu.clear();
      json['subMenu'].forEach((v) {
        subMenu?.add(new Menu.fromJson(v));
      });
    }
  }
}