Question

我需要创建一个搜索框，其中包含在ListView.Builder中进行搜索的结果，但是我崩溃了！我尝试通过获取Container高度值MediaQuery.of(context).size.height来解决问题，但还是遇到了同样的问题！

════════渲染库捕获异常

在布局过程中引发了以下断言：RenderFlex在底部溢出了41个像素。

相关的引起错误的小部件是       列lib / pages / search.dart：78溢出的RenderFlex的方向为Axis.vertical。 RenderFlex的边缘是   渲染中已用黄色和黑色标记了溢出   条纹的图案。这通常是因为内容太大   用于RenderFlex。

考虑将弹性系数（例如，使用扩展小部件）应用于   强制RenderFlex的子代适应可用空间   而不是按照其自然大小进行调整。这被认为是   错误状态，因为它表明存在无法   可见。如果内容合法大于可用内容   空间，请考虑在放置之前使用ClipRect小部件对其进行裁剪   在Flex中，或使用可滚动容器而不是Flex，例如   一个ListView。

有问题的特定RenderFlex是：RenderFlex＃1a63c   relayoutBoundary = up1溢出   ══════════════════════════════════════════════════ ══════════

我的代码：

body: Column(
        children: <Widget>[
          Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.only(right: 10),
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: new Border.all(
                    color: Colors.grey,
                    width: 1,
                  ),
                  borderRadius: BorderRadius.all(new Radius.circular(10))),
              child: DropdownButton<String>(
                value: dropdownValue,
                icon: Icon(Icons.keyboard_arrow_down),
                iconEnabledColor: Colors.grey,
                iconSize: 50,
                elevation: 16,
                isExpanded: true,
                style: TextStyle(color: Colors.black),
                underline: Container(
                  height: 2,
                ),
                onChanged: (String newValue) {
                  setState(() {
                    dropdownValue = newValue;
                  });
                },
                items: <String>["Swift", "Dart"]
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              )),
          Container(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                  TextField(
                    obscureText: true,
                    onChanged: (value) {
                      filterSearchResults(value);
                    },
                    decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color.fromRGBO(111, 192, 81, 1),
                                width: 1.5),
                            borderRadius: BorderRadius.circular(10)),
                        contentPadding:
                            EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                        hintText: "Search",
                        prefixIcon: new Icon(Icons.search, color: Colors.grey),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          borderSide: BorderSide(width: 1, color: Colors.grey),
                        )),
                  ),
                ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('${items[index]}'),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),

问题是什么，我该如何解决？

Answer 1

您需要将Expanded放在两个地方

body: Column(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.only(right: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: Colors.grey,
          width: 1,
        ),
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
      child: DropdownButton<String>(
        value: dropdownValue,
        icon: Icon(Icons.keyboard_arrow_down),
        iconEnabledColor: Colors.grey,
        iconSize: 50,
        elevation: 16,
        isExpanded: true,
        style: TextStyle(color: Colors.black),
        underline: Container(height: 2),
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        },
        items: <String>["Swift", "Dart"]
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    ),
    Expanded(  //TODO: Add Expanded here
      child: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            TextField(
              obscureText: true,
              onChanged: (value) {
                filterSearchResults(value);
              },
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    color: Color.fromRGBO(111, 192, 81, 1),
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(10),
                ),
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                hintText: "Search",
                prefixIcon: new Icon(Icons.search, color: Colors.grey),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  borderSide: BorderSide(width: 1, color: Colors.grey),
                ),
              ),
            ),
            Expanded( //TODO: Add Expanded here
              child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('${items[index]}'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    ),
  ],
)

RenderFlex在底部溢出了41个像素。相关的引起错误的小部件是Column

1 个答案: