展开时从API加载子数据颤动中的平铺 [英] Loading children data from an API when expanding on ExpansionTile in Flutter

问题描述

我的想法是，我有主要的类别，它们有自己的id，当用户展开磁贴(应该是fetchFromApi)时，它将从API(在本例中是一个模拟的资产json文件)获取数据，并将其显示为磁贴。

我正在努力获得正确的机制以加载它。我想这是州政府的决定吧？我已经尝试了未来建设者，因为我确实希望出现一个加载图标，因为它正在加载，但我似乎不能得到正确的想法。如能就如何实施这一目标提出建议，我们将不胜感激。

这是我现在的班级。

class DrawerNavigationPart extends StatelessWidget {
  final List<Category> mainCategories = Categories.categoryData;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: mainCategories.length,
      itemBuilder: (BuildContext context, int index) {
        final Category category = mainCategories[index];
        if (category.fetchFromApi) {
          List<Category> api = [];
          return ExpansionTile(
            key: PageStorageKey<Category>(category),
            leading: Icon(category.icon),
            title: Text(
              category.title,
              softWrap: false,
              overflow: TextOverflow.ellipsis,
            ),
            onExpansionChanged: (bool open) async {
              if (open) {
                String response = await DefaultAssetBundle.of(context)
                    .loadString(
                        'assets/822828-2228222-2222#category-api-mock.json');
                api = categoryResponseFromJson(response).data;
                print(api);
              }
            },
            children: [
//              FutureBuilder(
//                  future: DefaultAssetBundle.of(context).loadString(
//                      'assets/822828-2228222-2222#category-api-mock.json'),
//                  builder: (context, snapshot) {
//                    final CategoryResponse categoryResponse =
//                        categoryResponseFromJson(snapshot.data);
////                    return ListView.builder(
////                        itemCount: 3,
////                        itemBuilder: (BuildContext context, int index) {
////                          return Text(index.toString());
////                        });
//                    return ListTile(
//                        title: Text(categoryResponse.data[index].title));
//                  })
            ],
          );
        } else {
          return ListTile(
            leading: Icon(category.icon),
            title: Text(
              category.title,
              softWrap: false,
              overflow: TextOverflow.ellipsis,
            ),
            onTap: () {
              print(category.title + ' clicked');
            },
          );
        }
      },
    );
  }

  Widget _buildTiles(Category root) {
    if (root.children.isEmpty)
      return ListTile(
        leading: Icon(root.icon),
        title: Text(
          root.title,
          softWrap: false,
          overflow: TextOverflow.ellipsis,
        ),
        onTap: () {
          print("${root.title} listTile clicked");
        },
      );
    return ExpansionTile(
      key: PageStorageKey<Category>(root),
      leading: Icon(root.icon),
      title: Text(
        root.title,
        softWrap: false,
        overflow: TextOverflow.ellipsis,
      ),
      onExpansionChanged: (bool open) {
        print("${root.title} expansionTile clicked $open");
      },
      children: root.children.map(_buildTiles).toList(),
    );
  }
}

推荐答案

StatelessWidget未更改视图

因此使用StatefulWidget和State类

例如

class  DrawerNavigationPart extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _DrawerNavigationPart();
} 

class _DrawerNavigationPart extends State<DrawerNavigationPart> {

    
  final List<Category> mainCategories = Categories.categoryData;
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: mainCategories.length,
      itemBuilder: (BuildContext context, int index) {
        final Category category = mainCategories[index];
        if (category.fetchFromApi) {
          List<Category> api = [];
          return ExpansionTile(
            key: PageStorageKey<Category>(category),
            leading: Icon(category.icon),
            title: Text(
              category.title,
              softWrap: false,
              overflow: TextOverflow.ellipsis,
            ),
            onExpansionChanged: (bool open) async {
              if (open) {
                String response = await DefaultAssetBundle.of(context)
                    .loadString(
                    'assets/822828-2228222-2222#category-api-mock.json');
                api = categoryResponseFromJson(response).data;
                print(api);
              }
            },
            children: [
              FutureBuilder(
                  future: getJsonData(),
                  builder: (context, snapshot) {
                    final CategoryResponse categoryResponse =
                        categoryResponseFromJson(snapshot.data);
//                    return ListView.builder(
//                        itemCount: 3,
//                        itemBuilder: (BuildContext context, int index) {
//                          return Text(index.toString());
//                        });
                    return ListTile(
                        title: Text(categoryResponse.data[index].title));
                  })
            ],
          );
        } else {
          return ListTile(
            leading: Icon(category.icon),
            title: Text(
              category.title,
              softWrap: false,
              overflow: TextOverflow.ellipsis,
            ),
            onTap: () {
              print(category.title + ' clicked');
            },
          );
        }
      },
    );
  }

  Widget _buildTiles(Category root) {
    if (root.children.isEmpty)
      return ListTile(
        leading: Icon(root.icon),
        title: Text(
          root.title,
          softWrap: false,
          overflow: TextOverflow.ellipsis,
        ),
        onTap: () {
          print("${root.title} listTile clicked");
        },
      );
    return ExpansionTile(
      key: PageStorageKey<Category>(root),
      leading: Icon(root.icon),
      title: Text(
        root.title,
        softWrap: false,
        overflow: TextOverflow.ellipsis,
      ),
      onExpansionChanged: (bool open) {
        print("${root.title} expansionTile clicked $open");
      },
      children: root.children.map(_buildTiles).toList(),
    );
  }

  Future<String> getJsonData() async {
    var str = await DefaultAssetBundle.of(context).loadString(
        'assets/822828-2228222-2222#category-api-mock.json');
    return str;
  }
}

这篇关于展开时从API加载子数据颤动中的平铺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！