我爱模板网 > 建站教程 > APP开发,混合APP >  Flutter踩坑:Row包含Textfield时错误的解决办法正文

Flutter踩坑:Row包含Textfield时错误的解决办法

我爱模板网在用flutter布局app时,需要作出下面的效果:



以画红框的为例,这明显是Row里面套TextField:
class ListItem2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
      height: ScreenUtil().setHeight(88),
      width: ScreenUtil().setWidth(750),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 1, color:Colors.black12)
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            '需求面积',
            style:TextStyle(
              fontSize: ScreenUtil().setSp(30)
            ),
          ),
          Row(
            children: <Widget>[
              TextField(
                keyboardType: TextInputType.number,
                maxLines: 1,
                decoration: InputDecoration(
                  hintText: '请输入需求面积',
                  border: InputBorder.none
                ),
              ),
              Text(
                '方',
                style:TextStyle(
                  fontSize: ScreenUtil().setSp(28),
                  color: Color(0xFF666666),
                )
              )
            ],
          ),
        ],
      ),
    );
  }
}
但是,一运行就报了下面的错误:
I/flutter ( 3346): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3346): The following assertion was thrown during performLayout():
I/flutter ( 3346): An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
I/flutter ( 3346): This happens when the parent widget does not provide a finite width constraint. For example, if the
I/flutter ( 3346): InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a
I/flutter ( 3346): SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it.
I/flutter ( 3346): 'package:flutter/src/material/input_decorator.dart':
I/flutter ( 3346): Failed assertion: line 910 pos 7: 'layoutConstraints.maxWidth < double.infinity'
I/flutter ( 3346): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 3346): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 3346): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 3346):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 3346): Widget creation tracking is currently disabled. Enabling it enables improved error messages. It can
I/flutter ( 3346): be enabled by passing `--track-widget-creation` to `flutter run` or `flutter test`.
I/flutter ( 3346): When the exception was thrown, this was the stack:
I/flutter ( 3346): #2      _RenderDecoration._layout (package:flutter/src/material/input_decorator.dart:910:7)
I/flutter ( 3346): #3      _RenderDecoration.performLayout (package:flutter/src/material/input_decorator.dart:1214:44)
I/flutter ( 3346): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1701:7)

报错太长,就不都放上来了。

百度了好久没找到,再google找到了,说是在textFidle外面套个Expanded,即改造如下:
class ListItem2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
      height: ScreenUtil().setHeight(88),
      width: ScreenUtil().setWidth(750),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 1, color:Colors.black12)
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            '需求面积',
            style:TextStyle(
              fontSize: ScreenUtil().setSp(30)
            ),
          ),
          Row(
            children: <Widget>[
              //在这里套了个Expanded
              Expanded(
                child: TextField(
                  keyboardType: TextInputType.number,  //数字键盘
                  maxLines: 1,
                  decoration: InputDecoration(
                    hintText: '请输入需求面积',
                    border: InputBorder.none
                  ),
                ),
              ),
              Text(
                '方',
                style:TextStyle(
                  fontSize: ScreenUtil().setSp(28),
                  color: Color(0xFF666666),
                )
              )
            ],
          ),
        ],
      ),
    );
  }
}
一运行,还是报相同的错误。以为这种方法不行,找了半天,还没找到。死马当活马医,就把TextField外层的Row也给套上,因为这个Row外面还有个Row,代码如下:
class ListItem2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0),
      height: ScreenUtil().setHeight(88),
      width: ScreenUtil().setWidth(750),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 1, color:Colors.black12)
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            '需求面积',
            style:TextStyle(
              fontSize: ScreenUtil().setSp(30)
            ),
          ),
          //在这里也套了个Expanded
          Expanded(
            child: Row(
              children: <Widget>[
              	//在这里套了个Expanded
                Expanded(
                  child: TextField(
                    keyboardType: TextInputType.number,  //数字键盘
                    maxLines: 1,
                    decoration: InputDecoration(
                      hintText: '请输入需求面积',
                      border: InputBorder.none
                    ),
                  ),
                ),
                Text(
                  '方',
                  style:TextStyle(
                    fontSize: ScreenUtil().setSp(28),
                    color: Color(0xFF666666),
                  )
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
再次运行,发现效果出来了,这个问题困扰了我一个多小时,在这里记下,免得下次再犯。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:flutter报错:The method '/' was called on null. 下一篇:Flutter 给raisedButton添加边框
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢