gridview - Flutter 重用 View

Question

我是 Flutter 开发的新手，刚开始使用 gridViewWidget。在我的 gridview 中，我有 FlashCardList 和 FlashCards。在最高级别，它应该在任何对象上显示 FlashCardList 和 onTap，它应该显示另一个 gridview，其中包含与 flashCardList 类别关联的抽认卡。我的问题是，我是否需要为 FlashCards 创建一个新的 gridViewWidget 并重复 90% 的代码，或者我可以重用现有的小部件吗？我可以在 iOS 中通过再次调用相同的 View 并传递一些值来做到这一点，这样 subview 就知道要提取一组不同的数据，但我不确定如何使用请求类型的 futurebuilder 来做到这一点预定义以及需要预定义项目的 gridView Builder。这是我的代码:

 class GridViewWidget extends StatefulWidget{
  @override
  createState() => new GridViewState();

}

class GridViewState extends State<GridViewWidget>{

  List<Sound> sound;
  List<FlashCardList> flashCardList;
  List<FlashCards> flashCards;


  @override
  void initState(){
    debugPrint ('debug main.dart');
    super.initState();

  }

  Future<List<FlashCards>> fetchFlashCards() async{
    final response = await http.get('some url');
    //debugPrint (response.body);
    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      var flashCardsData = data["FlashCards"] as List;
      flashCards = flashCardsData.map<FlashCards>((json) => FlashCards.fromJson(json)).toList();
      debugPrint("Did get data: ${flashCards.first.name}");
    } else {
      throw Exception('Failed to load post');
    }
    //objects = [sound, flashCardList, flashCards].expand((x) => x).toList();
    return flashCards;
  }

  Future<List<FlashCardList>> fetchFlashCardList() async{
    final response = await http.get('some url');
    //debugPrint (response.body);
    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      var flashCardListData = data["FlashCardList"] as List;
      flashCardList = flashCardListData.map<FlashCardList>((json) => FlashCardList.fromJson(json)).toList();
      debugPrint("Did get data: ${flashCardList.first.name}");
    } else {
      throw Exception('Failed to load post');
    }
    //objects = [sound, flashCardList, flashCards].expand((x) => x).toList();
    return flashCardList;
  }

  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        title: new Text(Strings.pageTitle),
      ),
      body: FutureBuilder<List<FlashCardList>>(
        future: fetchFlashCardList(),
        builder: (BuildContext context, AsyncSnapshot<List<Object>> snapshot) {
          if (snapshot.hasError)
            return new Text(
              '${snapshot.error}',
              style: TextStyle(color: Colors.red),
            );
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return new Text('Input a URL to start');
            case ConnectionState.waiting:
              return new Center(child: new CircularProgressIndicator());
            case ConnectionState.active:
              return new Text('');
            case ConnectionState.done:
                return new GridView.builder(
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 200.0,
                      childAspectRatio: MediaQuery.of(context).size.width/(MediaQuery.of(context).size.height)),
                  itemCount: flashCardList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _getGridItemUI(context, flashCardList[index]);

                    /*return GridTile(header: Text("FlashCards"),
                        child: Text(
                        flashCards[index].name, textAlign: TextAlign.center));*/

                  },
                );
          }
        }
      ),
    );
  }

  _getGridItemUI(BuildContext context, FlashCardList item){
    return new InkWell(
      onTap: () {
        _showSnackBar(context, item);
      },
      child: new Card(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

              new Image(image: new CachedNetworkImageProvider("some url" + item.image)),
              /*new Expanded(
                child:new Center(
                  child: new Column(
                    children: <Widget>[
                      new SizedBox(height: 8.0),
                      new Expanded(
                        child: AutoSizeText(
                          item.name, maxLines: 1,
                        )
                      )
                    ],
                  ),
                )
              )*/
            ],
        ),
        elevation: 2.0,
        margin: EdgeInsets.all(5.0),
      )
    );
  }

  _showSnackBar(BuildContext context, FlashCardList item){

  }



}

Answer 1

您可以使 GridViewWidget 通用以解决类型问题或传递参数以区分闪存和闪存卡，但这不是理想的解决方案。我建议不要将数据获取逻辑放在您的小部件中。