Flutter问题：如何让ListView显示在搜索栏下方（解决重叠）

你当前使用Stack布局导致搜索栏层叠在ListView上方，出现了重叠。Stack的子组件是按添加顺序堆叠的，后面的组件会覆盖前面的，所以buildFloatingSearchBar()放在Column之后，直接盖住了ListView的顶部区域。

下面是几种可行的解决办法：

方法一：改用Column线性布局（推荐） #

把搜索栏作为Column的第一个子项，ListView用Expanded包裹占据剩余空间，这样两者自然上下排列，不会重叠。修改后的代码如下：

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: CustomAppBar(),
  resizeToAvoidBottomInset: false,
  body: Column(
    children: <Widget>[
      buildFloatingSearchBar(),
      Expanded(
          child: items.isNotEmpty
              ? ListView.builder(
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return Card(
                      child: Container(
                          child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          ListTile(
                              title: Text(
                                items[index].name!,
                                style: TextStyle(
                                    fontWeight: FontWeight.normal,
                                    fontSize: 18.0,
                                    fontFamily: 'supermarket'),
                              ),                                 
                        ],
                      )),
                    );
                  },
                )
              : Center(
                  child: Text('Search'),
                )),
    ],
  ),
);
}

方法二：给ListView添加顶部内边距 #

如果一定要保留Stack布局，可以给ListView设置顶部padding，数值等于搜索栏的实际高度，让内容避开搜索栏区域：

ListView.builder(
  padding: EdgeInsets.only(top: 80), // 替换为你搜索栏的真实高度
  itemCount: items.length,
  // 其余代码保持不变
)

方法三：利用搜索栏组件的内置属性 #

很多第三方搜索栏组件提供了专门的body参数，用来放置搜索栏下方的内容，组件会自动处理布局避免重叠。示例代码如下：

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: CustomAppBar(),
  resizeToAvoidBottomInset: false,
  body: FloatingSearchBar(
    hint: "输入关键词搜索",
    // 将ListView作为搜索栏的body内容
    body: items.isNotEmpty
        ? ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return Card(
                child: Container(
                    child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    ListTile(
                        title: Text(
                          items[index].name!,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 18.0,
                              fontFamily: 'supermarket'),
                        ),                                 
                  ],
                )),
              );
            },
          )
        : Center(child: Text('Search')),
  ),
);
}

优先推荐方法一，线性布局结构更清晰，不需要手动计算高度，适配性更好。

内容的提问来源于stack exchange，提问作者Ppnncs