Flutter-常见报错1

1. A RenderViewport expected a child of type RenderSliver but received a child of type RenderConstrainedBox.

大致意思是 一个RenderViewport的child应该全部是RenderSliver类型，但是它接收到的却有RenderConstrainedBox类型的孩子。

注意child是children的单数，定位问题要考虑全面.

出现问题的代码块如下：

child: CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text("CustomScrollView Demo"),
        background: Image.asset(
          "images/header_bg.png",
          fit: BoxFit.cover
        ),
      ),
    ),
    SizedBox(
      height: 100,
      child: Container(
        color: Colors.deepOrangeAccent,
        child: PageView(
          // scrollDirection: Axis.vertical,
          children: [Text("新闻"),Text("历史")],
        ),
      ),
    ),
    SliverPadding(
      padding: EdgeInsets.all(8.0),
      sliver: SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, //Grid按两列显示
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 4.0
        ),
        delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.cyan[100 * (index % 9)],
                child: Text("gird item $index"),
              );
            },
          childCount: 20
        ),
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlue[100 * (index % 9)],
              child: Text("list Item $index"),
            );
          },
        childCount: 20
      ),
    )
  ],
),

CustomScrollView的slivers参数接受的是一个Sliver数组，里面必须都是Sliver类型的组件，但第二个SizedBox是RenderBox类型的组件，问题就在这。

要解决这个问题，要么去掉SizedBox这个child，要么给SizedBox找个适配器，使之成为Sliver类型

Flutter中可滚动组件都有相应的Sliver,常用的Sliver如下：

这不就找到解决方案了~，给SizedBox的外层套上一个SliverToBoxAdapter. 修改后的代码如下：

Widget build(BuildContext context) {
  return Material(
    child: CustomScrollView(
      slivers: [
        SliverAppBar(
          pinned: true,
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("CustomScrollView Demo"),
            background: Image.asset(
              "images/header_bg.png",
              fit: BoxFit.cover
            ),
          ),
        ),
        SliverToBoxAdapter(
          child:SizedBox(
            height: 100,
            child: Container(
              color: Colors.deepOrangeAccent,
              child: PageView(
                // scrollDirection: Axis.vertical,
                children: [Text("新闻"),Text("历史")],
              ),
            ),
          ),
        ),
        SliverPadding(
          padding: EdgeInsets.all(8.0),
          sliver: SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, //Grid按两列显示
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0
            ),
            delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text("gird item $index"),
                  );
                },
              childCount: 20
            ),
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text("list Item $index"),
                );
              },
            childCount: 20
          ),
        )
      ],
    ),
  );
}

实现的效果如下：

参考文档链接：book.flutterchina.club/chapter6/cu…

2. The following assertion was thrown during performLayout():'package:flutter/src/rendering/stack.dart': Failed assertion: line 570 pos 12: 'size.isFinite': is not true

报错地方是：在Stack组件的外层又嵌套了一个Column组件，即Column的children里有Stack，可能会报以上错误，代码如下：

child: Column(
  children: [
    Stack(
      children: [
        Positioned(
          left: 18.0,
          child: Text("I am Jack"),
        ),
        Positioned(
          top: 18.0,
          child: Text("Your friend"),
        )
      ],
    )
  ],
),

解决办法有两种，1), 去掉Column组件 2), 在Stack的children里，添加一个Container组件. 修改后代码如下:

//方式一
child: Stack(
  children: [
    Positioned(
      left: 18.0,
      child: Text("I am Jack"),
    ),
    Positioned(
      top: 18.0,
      child: Text("Your friend"),
    )
  ],
),

//方式二

child: Column(
  children: [
    Stack(
      children: [
        Container(
          width: 300,height: 500,
          color: Colors.red,
        ),
        Positioned(
          left: 18.0,
          child: Text("I am Jack"),
        ),
        Positioned(
          top: 18.0,
          child: Text("Your friend"),
        )
      ],
    )
  ],
),

Column，Row等属于线性布局，Stack属于层叠布局，两者结合使用时要注意尺寸大小是否定义完全，避免报错