Question

在这种情况下：- 我有一个名为XYZBloc的Bloc，可从网络加载数据。我需要将这些列表渲染到sliverGrid中。相同的列表与sliverList配合得很好。

Store.dart

@override
Widget build(BuildContext context) {
return BlocProvider(
  create: (context) => _xyzBloc,
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,
    child: Container(
      width: MediaQuery.of(context).copyWith().size.width,
      height: MediaQuery.of(context).copyWith().size.height,
      child: BlocBuilder<XyzBloc, XyzState>(
          bloc: _xyzBloc,
          builder: (context, state) {
            if (state is XYZLoadingState) {
              return buildLoading();
            } else if (state is XYZErrorState) {
              return buildErrorUi(state.message);
            } else if (state is XYZLoadedState) {
              return _buildPageView(state.lists, context);
            } else {
              return Container();
            }
          }),
    ),
  ),
);
}

_buildPageView(List<XYZModel> lists, BuildContext context) {
return SliverGrid(
  gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              color: Colors.grey, height: 130.0, width: double.infinity),
          Text(lists[index].name)
        ],
      ),
    );
  }, childCount: lists.length),
);
}

代码以加载sliverGrid数据：-

Home.dart

@override
Widget build(BuildContext context) {
double cardWidth = MediaQuery.of(context).size.width / 3.3;
double cardHeight = MediaQuery.of(context).size.height / 3.6;
return Container(
  color: AppTheme.nearlyWhite,
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: Column(
      children: <Widget>[
        SizedBox(
          height: MediaQuery.of(context).padding.top,
        ),
        getAppBarUI(),
        Expanded(
            child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
                delegate: SliverChildListDelegate([
              Padding(
                padding: EdgeInsets.all(15),
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: 150,
                  child: BannerItems(),
                ),
              ),
            ])),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Padding(
                    padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
                    child: Container(
                      decoration: BoxDecoration(color: Colors.transparent),
                      height: 100,
                      child: Category(),
                    ),
                  ),
                ],
              ),
            ),
            Stores(),
          ],
        )),
      ],
    ),
  ),
);
}

我已经尝试了所有可能的调试方法，但是我的菜鸟感觉无法帮助我理解sliverGrid如何处理网络数据。任何建议，将不胜感激。

在颤动中使用bloc渲染slivergrid

0 个答案: