情况如下:- i有一个名为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数据的代码:-
家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如何与网络数据工作。如有任何建议、参考,将不胜感激。
1条答案
按热度按时间wvyml7n51#
这是我的代码片段,我使用SliverGrid与块构建器。