Uncaught Error: Cannot hit test a render box that has never been laid out

一个本身试图占用尽可能大的渲染盒在给定无边界约束时不会有用,在检查模式下(指Dart的checked模式),会抛出异常。https://flutterchina.club/layout/

这个异常,问题可能是你把ListView放在一个Column/Row里面。异常内容很好地解释了错误。

为了避免错误,你需要提供一个有大小的组件包起ListView。

我建议你使用Expanded组件,来告知水平/垂直大小(最大可用)和SizedBox组件(可以是一个容器)。

 

错误代码示例一

class ListFormState extends State<ListForm> {
    List<String> products = ["Test1", "Test2", "Test3"];
    @override
    Widget build(BuildContext context) {
      return new Container(
        child: new Center(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new ListView.builder(
                    itemCount: products.length,
                    itemBuilder: (BuildContext ctxt, int index) {
                      return new Text(products[index]);
                    }
                  ),
                  new IconButton(
                    icon: Icon(Icons.remove_circle),
                    onPressed: () { },
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
              new TextField(
                decoration: new InputDecoration(
                  hintText: "Prodotto"
                ),
                onSubmitted: (String str) {
                  setState(() {
                    products.add(str);
                  });
                },
              ),
            ]
          )
        )
      );
    }
}

应该这样写:

   Row(
      children: <Widget>[
        Expanded(
          child: SizedBox(
            height: 200.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: products.length,
              itemBuilder: (BuildContext ctxt, int index) {
                return Text(products[index]);
              },
            ),
          ),
        ),
        new IconButton(
          icon: Icon(Icons.remove_circle),
          onPressed: () {},
        ),
      ],
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
    )

错误代码示例二

             Padding(
              padding: EdgeInsets.all(42.0),
              child: Column(children: [
                Container(
                  height: 100.0,
                  alignment: Alignment.center,
                  child: Text(
                    '了解我们的服务',
                    style: TextStyle(fontSize: 42.0),
                  ),
                ),
                GridView(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1.0,
                      ),
                      children: [
                        {
                          'image': 'images/huayingjuhe/neirong.png',
                          'title': '内容分发'
                        }
                      ].map((e) {
                        return Text(e['title']);
                        // Container(
                        //   child: Column(
                        //     children: [Image.asset(e['image']), Text(e['title'])],
                        //   ),
                        // );
                      }).toList()),
                
              ])),

应该这样写:

            Padding(
              padding: EdgeInsets.all(42.0),
              child: Column(children: [
                Container(
                  height: 100.0,
                  alignment: Alignment.center,
                  child: Text(
                    '了解我们的服务',
                    style: TextStyle(fontSize: 42.0),
                  ),
                ),
                Center(
                    child: SizedBox(
                  height: 200.0,
                  width: 1000.0,
                  child: GridView(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1.0,
                      ),
                      children: [
                        {
                          'image': 'images/huayingjuhe/neirong.png',
                          'title': '内容分发'
                        }
                      ].map((e) {
                        return Text(e['title']);
                        // Container(
                        //   child: Column(
                        //     children: [Image.asset(e['image']), Text(e['title'])],
                        //   ),
                        // );
                      }).toList()),
                ))
              ])),

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值