这是我想要实现的模型 - 它是CupertinoSliverNavigationBar下面的CupertinoActivityIndicator,用于通知用户正在下载数据 .
下载后,它应该是这样的:
现在,我一直在尝试使用以下代码获得此效果:
List<Trade> trades = [];
showLoadingDialog() {
return trades.length == 0;
}
getBody() {
if (showLoadingDialog()) {
return getProgressDialog();
} else {
return getTradeItemList();
}
}
getTradeItemList() {
return new CupertinoPageScaffold(
child: new CustomScrollView(slivers: <Widget>[
const CupertinoSliverNavigationBar(
largeTitle: const Text('Coffee Shop'),
),
getBody(),
]));
}
getProgressDialog() {
return new Container(
decoration: const BoxDecoration(
color: CupertinoColors.white,
),
child: new Center(child: const CupertinoActivityIndicator()));
}
但是,我收到此错误是因为我试图将非RenderSliver类型放入Sliver中 . 换句话说,我将CupertinoActivityIndicator放入一个Sliver中,代码拒绝它 .
══╡由WIDGETS LIBRARY引起的异常╞═══════════════════════════════════════════════════════════════════════════════════下面的断言被抛出构建容器(bg:BoxDecoration(颜色:颜色(0xffffffff))):RenderViewport期望RenderSliver类型的子项但是收到了RenderDecoratedBox类型的子项 . RenderObjects期望特定类型的子项,因为它们在布局和绘制期间与子项协调 . 例如,RenderSliver不能是RenderBox的子项,因为RenderSliver不理解RenderBox布局协议 .
我能达到我想要的最接近的效果显示在下面的gif中 . 但是,正如您可以清楚地看到的,当CupertinoActivityIndicator可见时,CupertinoSliverNavigationBar不会显示 . 只有在下载了数据之后,才能看到显示“咖啡店”的CupertinoSliverNavigationBar .
我使用以下代码实现了上述目标:
List<Trade> trades = [];
showLoadingDialog() {
return trades.length == 0;
}
getBody() {
if (showLoadingDialog()) {
return getProgressDialog();
} else {
return getTradeItemList();
}
}
getProgressDialog() {
return new Container(
decoration: const BoxDecoration(
color: CupertinoColors.white,
),
child: new Center(child: const CupertinoActivityIndicator()));
}
getTradeItemList() {
return new CupertinoPageScaffold(
child: new CustomScrollView(
slivers: <Widget>[
const CupertinoSliverNavigationBar(
largeTitle: const Text('Coffee Shop'),
),
new SliverPadding(
// Top media padding consumed by CupertinoSliverNavigationBar.
// Left/Right media padding consumed by Tab1RowItem.
padding: MediaQuery
.of(context)
.removePadding(
removeTop: true,
removeLeft: true,
removeRight: true,
)
.padding,
sliver: new SliverList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Tab1RowItem(
index: index,
lastItem: index == trades.length - 1,
color: "Coffee Beans",
colorName: "Buy coffee now",
);
},
childCount: trades.length,
),
),
)
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return getBody();
}
@override
void initState() {
super.initState();
loadDataTrades();
}
谁能告诉我如何达到我想要的效果?
1 回答
如果加载完成,则将_mainFrame Widget从CupertionActivityIndicator更改为listview .