16.补充_保持页面状态

修正一个地方:

设置了item的高度为380

横向列表为380、最终build的高度也增加了50为430.

增加了上面的高度以后，下面那个横线划掉的价格可以显示出来了。

但是还是有超出的问题。

保持首页页面状态

每次点击底部的tab标签。再点击首页，首页的数据就会重新加载。

这里就用到了混入，在页面上进行混入：with AutomaticKeepAliveClientMixin

混入之后必须主要三点：

第一，添加混入

第二:重写wantKeepAlive方法，返回为true

第三，改造indexPage

改造indexPage

最终body里面返回的是：IndexedStack

参数1是索引值就是当前的索引

第二个children因为类型是widget类型的数组 所以改造了tabBodies这个List对象为Widget类型的

改造之后的

homePage页面重写initState方法 打印出来一句话，来判断当前的页面是否加载了数据

效果展示

从别的tab切回来，页面状态就保持住了

最终代码

home_page.dart

index_page.dart

超出边界的错误

I/flutter ( 6079): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════I/flutter ( 6079): The following message was thrown during layout:I/flutter ( 6079): A RenderFlex overflowed by 2.9 pixels on the bottom.I/flutter ( 6079):I/flutter ( 6079): The overflowing RenderFlex has an orientation of Axis.vertical.I/flutter ( 6079): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow andI/flutter ( 6079): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.I/flutter ( 6079): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of theI/flutter ( 6079): RenderFlex to fit within the available space instead of being sized to their natural size.I/flutter ( 6079): This is considered an error condition because it indicates that there is content that cannot beI/flutter ( 6079): seen. If the content is legitimately bigger than the available space, consider clipping it with aI/flutter ( 6079): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,I/flutter ( 6079): like a ListView.I/flutter ( 6079): The specific RenderFlex in question is:I/flutter ( 6079): RenderFlex#907c5 relayoutBoundary=up17 OVERFLOWINGI/flutter ( 6079): creator: Column ← ConstrainedBox ← Padding ← Container ← Recommend ← Column ← _SingleChildViewportI/flutter ( 6079): ← IgnorePointer-[GlobalKey#ecea8] ← Semantics ← Listener ← _GestureSemantics ←I/flutter ( 6079): RawGestureDetector-[LabeledGlobalKey#92ff4] ← ⋯I/flutter ( 6079): parentData: (can use size)I/flutter ( 6079): constraints: BoxConstraints(0.0<=w<=411.4, h=220.3)I/flutter ( 6079): size: Size(411.4, 220.3)I/flutter ( 6079): direction: verticalI/flutter ( 6079): mainAxisAlignment: startI/flutter ( 6079): mainAxisSize: maxI/flutter ( 6079): crossAxisAlignment: centerI/flutter ( 6079): verticalDirection: downI/flutter ( 6079): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

群里面也有遇到这个问题的：先自己解决，不行可以问问这个人

2019年4月8日-wjw

我以为是SingleChildScrollView引起的这个问题，所以去掉了这个SingleChildScrollView，还是用直接Column，发现还是不行，黄条显示的更多了。

不起作用，恢复原来的代码：

修复Recommend商品推荐超出边界的问题

把最终Recommend的build里面的高度本来是430，这里改成了438就可以了。