在flutter中单击卡片项目时如何动态创建Listview？答案

【问题标题】：How to create Listview dynamically when clicking card items in flutter?在flutter中单击卡片项目时如何动态创建Listview？
【发布时间】：2019-10-25 12:19:39
【问题描述】：

我有一个列表视图中显示的类别列表。现在我试图在单击每个类别列表时创建子类别并将其显示到颤动的另一个列表视图中。

对于每个类别，我必须动态创建另一个子类别列表。我有 json 数据和良好的工作类别列表。我必须根据类别列表创建子类别。

我有一个模型类，其中还包含类别详细信息和子类别详细信息。

我怎样才能做到这一点？

模型类

  class ProductCategoryModel {
   String categoryName;
   String categoryImage;
   String categoryId;
   List<SubCategory> subcategory;

    ProductCategoryModel(
     {this.categoryName,
     this.categoryImage,
     this.categoryId,
     this.subcategory});

    factory ProductCategoryModel.fromJson(Map<String, dynamic> json) {
    var list = json['children'] as List;
    print(list.runtimeType);
    List<SubCategory> subCategoryList =
    list.map((i) => SubCategory.fromJson(i)).toList();

   return ProductCategoryModel(
   categoryName: json['name'],
   categoryImage: json['image'],
   categoryId: json['category_id'],
   subcategory: subCategoryList,
   );
  }
 }

  class SubCategory {
  String subCategoryId;
  String subCategoryName;

  SubCategory({this.subCategoryId, this.subCategoryName});

  factory SubCategory.fromJson(Map<String, dynamic> subJson) {
     return SubCategory(
     subCategoryId: subJson['SubCategoryModel'],
      subCategoryName: subJson['name'],
     );
   }
 }

Json 响应：

   {
    "category_id": "1",
     "name": "Vehicle",
     "column": "1",
        "children": [
           {
             "category_id": "101",
             "name": "Two Wheeler",
             "product_count": " (0)"
           },
           {
             "category_id": "102",
             "name": "Four Wheeler",
             "product_count": " (1)"
           }
        ]
      },

【问题讨论】：

如果你能分享你期望的UI屏幕会更好，
类别的水平列表视图。当单击类别项目时，在水平类别列表下动态创建另一个列表视图。
好的，所以只需在屏幕上添加两个列表视图 1 在屏幕顶部，第二个在类别的第一个和 onTap 下方，更改状态并设置所选类别的子类别。
是的，我必须将数据动态添加到子类别列表视图中。我有上面代码所示的 json 数据，我该如何映射这些数据
我这里添加了Json响应，还有模型类..

标签： flutter dart flutter-listview

【解决方案1】：

我已经创建了这个演示。

检查一下，如果有需要可以问我。

技巧就在这里，根据您的类别创建新的布尔列表，然后根据该布尔列表有条件地呈现子类别。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool success = false;

  static List<String> categories = ['1', '2', '3'];
  static List<List<String>> subCategories = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'i']
  ];
  static List<bool> activeCategories = List.filled(categories.length, false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              SizedBox(
                height: 50,
                child: Center(
                  child: RaisedButton(
                    onPressed: () {
                      setState(() {
                        activeCategories[index] =
                            activeCategories.elementAt(index) == true
                                ? false
                                : true;
                      });
                    },
                    child: Text(
                      categories.elementAt(index),
                    ),
                  ),
                ),
              ),
              activeCategories.elementAt(index)
                  ? ListView.builder(
                      shrinkWrap: true,
                      itemCount: subCategories.length,
                      itemBuilder: (context, subIndex) {
                        return SizedBox(
                          height: 50,
                          child: Center(
                            child: Text(subCategories
                                .elementAt(index)
                                .elementAt(subIndex)),
                          ),
                        );
                      },
                    )
                  : SizedBox(),
            ],
          );
        },
      ),
    );
  }
}

【讨论】：