我的页面排版是这样的,从上至下 banner(暂时就是一张图片)+两个固定菜单+广告条+接口读取的网格菜单。

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Column(
    children: <Widget>[
      Image.asset(
        'assets/main_banner2.png',
        width: ScreenUtil.getInstance().width,
        height: ScreenUtil.getInstance().setHeight(350.0),
        fit: BoxFit.fill,
      ),
      Container(
          width: double.infinity, height: 2.0, color: Colors.black12),
      _topRow(), // 中间两固定菜单
      GridView.count(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        crossAxisCount: 4,
        crossAxisSpacing: 3.0,
        children: _centerGridData(), // 问题就出在这个函数里边
      )
    ],
  ),
)

_centerGridData()具体实现,看上去没有任何问题对吧,接下来请看各种跳坑的处理

List<Widget> _centerGridData() {
  return _menuList.map((value) {
    InkWell(
      customBorder:
          Border.all(color: Color.fromRGBO(223, 223, 223, 0.7), width: 1.0),
      onTap: () {
        MyToastUtils.showToastInCenter(value.menuId.toString(), 0);
      },
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Image.network(value.menuLogo, width: 35.0, height: 35.0),
            SizedBox(height: 12.0),
            Text(value.describes,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.blueGrey))
          ]),
    );
  }).toList();
}

考虑到数据会很多所以布局最外层用的SingleChildScrollView,前面布局都没什么问题,直到设置网格布局GridView后无限报错,根据异常信息网上资料找遍仍然无果,错误信息五花八门,就是么有具体指向错误的点

错误信息①

I/flutter (20664): The following assertion was thrown during performResize():
I/flutter (20664): Vertical viewport was given unbounded height.
I/flutter (20664): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (20664): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (20664): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (20664): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (20664): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (20664): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (20664): the height of the viewport to the sum of the heights of its children.

错误信息②

I/flutter (20664): The getter 'key' was called on null.
I/flutter (20664): Receiver: null
I/flutter (20664): Tried calling: key

错误信息③

I/flutter (20664): The following RenderObject was being processed when the exception was fired: RenderSliverGrid#6df17 relayoutBoundary=up27 NEEDS-LAYOUT NEEDS-PAINT:
I/flutter (20664):   creator: SliverGrid ← MediaQuery ← SliverPadding ← ShrinkWrappingViewport ←
I/flutter (20664):     IgnorePointer-[GlobalKey#c3bc8] ← Semantics ← Listener ← _GestureSemantics ←
I/flutter (20664):     RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45d7d] ← Listener ← _ScrollableScope
I/flutter (20664):     ← _ScrollSemantics-[GlobalKey#710e0] ← ⋯
I/flutter (20664):   parentData: paintOffset=Offset(0.0, 0.0) (can use size)
I/flutter (20664):   constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle,
I/flutter (20664):     scrollOffset: 0.0, remainingPaintExtent: Infinity, crossAxisExtent: 360.0, crossAxisDirection:
I/flutter (20664):     AxisDirection.right, viewportMainAxisExtent: Infinity, remainingCacheExtent: Infinity cacheOrigin:
I/flutter (20664):     0.0 )
I/flutter (20664):   geometry: null
I/flutter (20664):   no children current live
I/flutter (20664): This RenderObject has no descendants.

以上问题通过度娘以及自己做的一些修改最后都没用,甚至还有新的异常报出来,什么给GridView加上shrinkWrap: true,什么给子控件设置宽高,使用Container约束布局等等全然无望。。。琢磨一个下午,把GridView里边的子widget写成一个个死的还就能运行起来。。。算了不扯了。。。直入主题吧

上面说到我的GridView里子widget是用一个函数统一加载的

我这就来说下问题所在吧

List<Widget> _centerGridData() {
  return _menuList.map((value) {
    return InkWell( // 之前这个地方没有写上return也并没有报错,然后发现下面的.toList()返回的List中类型是NULL类型
      customBorder:
          Border.all(color: Color.fromRGBO(223, 223, 223, 0.7), width: 1.0),
      onTap: () {
        MyToastUtils.showToastInCenter(value.menuId.toString(), 0);
      },
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Image.network(value.menuLogo, width: 35.0, height: 35.0),
            SizedBox(height: 12.0),
            Text(value.describes,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.blueGrey))
          ]),
    );
  }).toList(); // 就是这个地放鼠标放上去会有提示 List<null> toList({bool growable = true}),上边加上return后提示才正确返回了List<widget>,至此问题得以解决
}

其实map里边是一个带返回类型的函数,但dart在这个地方我没有加return它却也没有提示错误。以后尽量规范下自己的代码编写吧

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐