无法在颤动中正确显示列表

Question

我试图在颤动中显示一个列表。该列表有 2 个部分，一个是父名称，在此之下，我有子类别。我正在使用 API 获取数据并尝试使用获取的数据创建复选框。我无法理解如何正确显示列表。正如图片中发布的那样，显示的主标题与其拥有的类别数量相同。我想显示一个标题及其下的子类别。请帮助。

列表生成器的功能

return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                ExpansionTile(
                  title: Text(snapshot.data[index].p_cat_name),
                  children: [
                    ListTile(
                      title: Text(snapshot.data[index].c_cat_name),
                      leading: Checkbox(
                        value: CategoriesDsiplay.userStatus[index] =
                            !CategoriesDsiplay.userStatus[index],
                        onChanged: (bool? val) {
                          setState(() {
                            CategoriesDsiplay.userStatus[index] =
                                !CategoriesDsiplay.userStatus[index];
                          });
                        },
                      ),
                    ),
                  ],
                ),
              ],
            );
          },
        );

向列表添加数据的函数

  Future<List<CategoryFiltersList>> getCategoryList() async {
var url = Uri.parse(
   urlhere );
final headers = {'Content-Type': 'application/x-www-form-urlencoded'};
Map<String, dynamic> body = {
  'st_search': '',
};
final encoding = Encoding.getByName('utf-8');

Response response = await post(
  url,
  headers: headers,
  body: body,
  encoding: encoding,
);

var schemeBody = response.body;
var jsonData = json.decode(schemeBody);

List<CategoryFiltersList> categoryFiltersLists = [];
for (var sch in jsonData) {
  // String credentials = sch['isin'];
  // Codec<String, String> stringToBase64 = utf8.fuse(base64);
  // Body.encoded =
  //     stringToBase64.encode(credentials); // dXNlcm5hbWU6cGFzc3dvcmQ=

  CategoryFiltersList categoryFiltersList = CategoryFiltersList(
    sch['mf_cat_id'],
    sch['p_cat_name'],
    sch['c_cat_name'],
  );

  if (sch['mf_cat_id'] != null) {}

  categoryFiltersLists.add(categoryFiltersList);
  CategoriesDsiplay.userStatus.add(false);
}

return categoryFiltersLists;

}

Json 数据：

flutter: [{mf_cat_id: 6, p_cat_name: EQUITY, c_cat_name: Value_Fund}, {mf_cat_id: 7, p_cat_name: EQUITY, c_cat_name: Large_Cap}, {mf_cat_id: 8, p_cat_name: EQUITY, c_cat_name: Large_&_Midcap}, {mf_cat_id: 9, p_cat_name: EQUITY, c_cat_name: Multicap}, {mf_cat_id: 10, p_cat_name: EQUITY, c_cat_name: Midcap}, {mf_cat_id: 11, p_cat_name: EQUITY, c_cat_name: Small_Cap}, {mf_cat_id: 13, p_cat_name: EQUITY, c_cat_name: Focussed_Fund}, {mf_cat_id: 14, p_cat_name: EQUITY, c_cat_name: Dividend_Yield_Fund}, {mf_cat_id: 15, p_cat_name: HYBRID, c_cat_name: Arbitrage_Fund}, {mf_cat_id: 16, p_cat_name: HYBRID, c_cat_name: Conservative_Hybrid_Fund}, {mf_cat_id: 17, p_cat_name: HYBRID, c_cat_name: Equity_Savings_Fund}, {mf_cat_id: 18, p_cat_name: HYBRID, c_cat_name: Dynamic_Asset_Allocation_Fund}, {mf_cat_id: 19, p_cat_name: HYBRID, c_cat_name: Balanced_Advantage_Fund}, {mf_cat_id: 20, p_cat_name: HYBRID, c_cat_name: Aggressive_Hybrid_Fund}, {mf_cat_id: 21, p_cat_name: HYBRID, c_cat_name: Multi_Assest_Allocatio<…>

Answer 1

您的ListView.builder 为您的每一个回复都构建了这个：

Column(
  children: [
    ExpansionTile(
      title: Text(snapshot.data[index].p_cat_name),
      children: [
        ListTile(
          title: Text(snapshot.data[index].c_cat_name),
          leading: Checkbox(
            value: CategoriesDsiplay.userStatus[index] =
                !CategoriesDsiplay.userStatus[index],
            onChanged: (bool? val) {
              setState(() {
                CategoriesDsiplay.userStatus[index] =
                    !CategoriesDsiplay.userStatus[index];
              });
            },
          ),
        ),
      ],
    ),
  ],
);

问题在于，您的应用会为响应列表中的每个元素构建一个新的ExpansionTile。 要解决这个问题，您必须找出您的回复有哪些和多少个“p_cat_name”，并为每个p_cat_name 构建一个ExpansionTile。作为一个孩子，它应该有另一个ListView.builder，它为响应数组中的每个元素构建一个ListTile，它与父元素具有相同的p_cat_name（你可以使用if语句检查来做到这一点）。