flutter - 颤动如何使用文本字段搜索的结果使容器扩展

Question

我试图制作一个像自定义搜索结果页面这样的下拉列表，但它失败了，出现了一些错误，比如 RenderFlex 子项具有非零弹性，但传入的高度约束是无限的。有什么办法可以解决掉包吗？？当我删除单个子滚动视图时，除了滚动之外的所有内容都在工作，但是有什么方法可以实现可滚动？

列表页

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  List<Map<String, String>> studentList = [
    {"John Honai": "Tokio"},
    {"John Wick": "Cuba"}
  ];
  bool showList = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 20,
            ),
            Container(
              height: 50,
              child: Text("container1 height 50"),color: Colors.lightBlue,
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 50,
              child: Text("container2 height 50"),color: Colors.orangeAccent,
            ),
            SizedBox(
              height: 20,
            ),
            ButtonSearchExpanded(
              onChangedText: (_) {
                setState(() {
                  showList = true;
                });
              },
              showList: showList,
              studentList: studentList,
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 50,
              child: Text("container3 height 50"),color: Colors.white54,
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 50,
              child: Text("container4 height 50"),color: Colors.cyanAccent,
            ),
          ],
        ),
      ),
    );
  }
}

更改响应上的Widgetpage 文本字段传递给列表页面并传回 show studentList 为 true，显示列表视图。

import 'package:flutter/material.dart';

class ButtonSearchExpanded extends StatelessWidget {
  final List<Map<String, String>> studentList;
  final bool showList;
final Function onChangedText;
  ButtonSearchExpanded(
      {
      this.onChangedText,this.studentList,this.showList});
  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Container(
      child: Column(
        children: [
          Container(
            height: 60,
            child: Row(
              children: [Expanded(child:
               TextField(onChanged: onChangedText,)), Text("some other content"),

              ],
            ),
          ),showList?Expanded(child: ListView.builder(itemCount:studentList.length,itemBuilder: (context,index){
            return ListTile(title: Text(studentList[index].keys.first),trailing: Text(studentList[index].values.first),);
          })):Container()
        ],
      ),
    ));
  }


}

Answer 1

您是否尝试过添加此行shrinkWrap: true,？

ListView.builder(
shrinkwrap:true, // add this line 
itemBuilder: (context,index){
            return 

Answer 2

我的研究不可能，列 - >扩展 - > listViewBuilder互相争议，因为列会在扩展的孩子时缩小IT子，因此我将其更改为flexible fiver property flexFit.loose and column property main Axis size size min，min，min，min，因此它解决了这个问题。我从如何在 SingleChildScrollView 中使用 Expanded 得到这个答案？

  final List<Map<String, String>> studentList;
  final bool showList;
final Function onChangedText;
  ButtonSearchExpanded(
      {
      this.onChangedText,this.studentList,this.showList});
  @override
  Widget build(BuildContext context) {
    return Column(mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 60,
          child: Row(
            children: [
             Expanded(child: TextField(onChanged: onChangedText,)), Text("some other content"),

            ],
          ),
        ),showList?Flexible(fit: FlexFit.loose,child: ListView.builder(shrinkWrap: true,itemCount: studentList.length,itemBuilder: (context,index){
          return ListTile(title: Text(studentList[index].keys.first),trailing: Text(studentList[index].values.first),);
        })):Container()
      ],
    );
  }


}