Question

我正在尝试模仿类似于附件图像的searchview，但是出现以下错误。我可以使用ListTile来实现此目的，但是无法将填充设置为图标或TextField。所以我正在尝试使用Row小部件来实现这一点。请查看我的代码，并帮助我绘制此搜索栏。

 I/flutter (19181): The following assertion was thrown during 
 performLayout():
 I/flutter (19181): BoxConstraints forces an infinite width.
 I/flutter (19181): These invalid constraints were provided to 
 RenderAnimatedOpacity's layout() function by the      
 I/flutter (19181): following function, which probably computed 
 the invalid constraints in question:
 I/flutter (19181):   _RenderDecoration._layout.layoutLineBox (package:flutter/src/material/input_decorator.dart:767:11)
 I/flutter (19181): The offending constraints were:
 I/flutter (19181):   BoxConstraints(w=Infinity, 0.0<=h<=46.0)

这是我的代码：

 new Container(
            height: 70.0,
              color: Theme.of(context).primaryColor,
              child: new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Card(
                      child: new Container(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            new Icon(Icons.search),


                            new Container(
                              height: double.infinity,
                              width: double.infinity,
                              child: new TextField(
                                controller: controller,
                                decoration: new InputDecoration(
                                    hintText: 'Search', border: InputBorder.none),
                                // onChanged: onSearchTextChanged,
                              ),
                            ),
                            new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                              controller.clear();
                              // onSearchTextChanged('');
                            },),



                          ],
                        ),
                      )
                  ))),

Answer 1

您正试图为Container的父级TextField定义无限的高度和宽度，而Expanded要使用所有空间。

以下方法通过使用Container( height: 70.0, child: Card( margin: EdgeInsets.all(8.0), child: Row( children: <Widget>[ Padding( padding: EdgeInsets.all(8.0), child: Icon(Icons.search), ), Expanded( child: TextField( decoration: new InputDecoration( hintText: 'Search', border: InputBorder.none), ), flex: 1, ), IconButton( icon: Icon(Icons.cancel), onPressed: () {}, ) ], ), ), ),来填充可用空间：

column

Answer 2

编辑：该答案是针对上述问题的快速解决方案。

最佳实践是Derek Lakin's answer

答案：

要最大化容器的宽度，请将其宽度设置为

MediaQuery.of(context).size.width

检查此代码：

new Container(
    height: 70.0,
    color: Theme.of(context).primaryColor,
    child: new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Card(
            child: new Container(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Icon(Icons.search),
                  new Container(
                    //height: double.infinity, //This is extra
                    width: MediaQuery.of(context).size.width - 100.0, // Subtract sums of paddings and margins from actual width 
                    child: new TextField(
                      controller: controller,
                      decoration: new InputDecoration(
                          hintText: 'Search', border: InputBorder.none),
                      // onChanged: onSearchTextChanged,
                    ),
                  ),
                  new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                    controller.clear();
                    // onSearchTextChanged('');
                  },),
                ],
              ),
            )
        )))

颤抖的搜索栏布局问题BoxConstraints强制无限宽度

2 个答案: