flutter - ListView 构建器在自动完成小部件中消耗的空间超过了必要的空间

问题描述

我正在寻找一个带有建议选项小部件的简单文本字段。从api.flutter.dev找到这个示例代码。我跟着它，出于某种原因，ListView 构建器在列表构建的开头一直留下大量空间。

切换到 RawAutoComplete 不起作用。将其切换到 ListView 会得到相同的结果。Flutter 检查器只是跳过该部分。

这是我的代码：

class First extends StatefulWidget {
  const First({Key? key}) : super(key: key);

  @override
  _FirstState createState() => _FirstState();
}

class _FirstState extends State<First> {
  List<String> rise = ["rise","rose","petal","dandelion"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: _first(),
    );
  }
  _first(){
    return Center(
      child: Autocomplete<String>(
        optionsBuilder: (TextEditingValue textController) {
          if (textController.text == '') {
            return rise;
          }
          return rise.where((String option) {
            return option.contains(textController.text.toLowerCase());
          });
        },
        optionsViewBuilder: (BuildContext context,
            AutocompleteOnSelected<String> onSelected,
            Iterable<String> options) {
          return Align(
            alignment: Alignment.topLeft,
            child: Material(
              elevation: 4.0,
              child: Container(
                width: 400,
                color: Colors.blue,
                child: ListView.builder(
                  shrinkWrap: true,
                 itemCount: rise.length,
                 itemBuilder: (BuildContext context, index){
                    return GestureDetector(
                      onTap: () {
                        onSelected(rise[index]);
                      },
                      child: ListTile(
                        title: Text(rise[index]),
                      ),
                    );
                 },
                ),
              ),
            ),
          );
        },
        onSelected: (string) {},
      ),
    );
  }
}

这是图片

这是检查员的“显示指南”选项

标签： flutterflutter-layout

https://api.flutter.dev/flutter/widgets/ListView-class.html

默认情况下，ListView 将自动填充列表的可滚动末端，以避免 MediaQuery 填充指示的部分障碍。为避免此行为，请使用零填充属性覆盖。

因此，您可以删除 ListView 的顶部填充。

...
MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: ListView(
...

flutter - ListView 构建器在自动完成小部件中消耗的空间超过了必要的空间

问题描述

解决方案

推荐阅读