Question

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

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

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

我怎么能做到这一点？

模型类

End_date

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'],
     );
   }
 }

Answer 1

我已经创建了这个演示。

检查一下，然后问我是否有需要。

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

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(),
            ],
          );
        },
      ),
    );
  }
}

如何在单击卡片时快速动态创建Listview？

1 个答案: