如何在列表视图构建器中显示嵌套列表项答案

【问题标题】：How to display nested list items in a listview builder如何在列表视图构建器中显示嵌套列表项
【发布时间】：2022-01-06 08:03:50
【问题描述】：

我如何使用 listview builder 在一个视图中呈现下面列表的元素。

下面的列表有嵌套列表。它的长度是两个。

[[{名称：豆类，数量：20，{名称：豆类，数量：10}]，[ {名称：大米，数量：5}]]

我需要在一个列表视图构建器中显示三个项目，如下所示它会这样显示

名称：豆类数量：20

名称：豆类数量：10

名称：大米数量：5

【问题讨论】：

请清楚你想解释什么，我不明白到底是什么问题
完成，希望现在更清晰

标签： flutter dart listview

【解决方案1】：

你可以这样实现：

List lists = [["list1"],["list2"]];

 return ListView(
          children: [
            for (var list in lists)
              for (var element in list) ListTile(title: element),
          ],
        );

【讨论】：

【解决方案2】：

You can use StickyGroupedListView List or groupListView to show nested item 
 https://pub.dev/packages/sticky_grouped_list

  https://pub.dev/packages/grouped_list

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

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

List _elements = [
  {'name': 'John', 'group': 'Team A'},
  {'name': 'Will', 'group': 'Team B'},
  {'name': 'Beth', 'group': 'Team A'},
  {'name': 'Miranda', 'group': 'Team B'},
  {'name': 'Mike', 'group': 'Team C'},
  {'name': 'Danny', 'group': 'Team C'},
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped List View Example'),
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element['group'],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1['name'].compareTo(item2['name']),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              value,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

【讨论】：