如何在Flutter中实现类似BlaBlaCar首页的图片顶部搜索栏？

你现在的问题是用Column把背景图和搜索栏垂直排列了，导致搜索栏在背景图下方，而非叠加在背景图上方。要实现目标效果，核心是用**Stack作为根容器**，将背景图和搜索栏堆叠起来，再通过Positioned组件控制搜索栏的位置。

修改后的代码示例 #

Stack(
  fit: StackFit.expand, // 让Stack占满父容器空间
  children: [
    // 背景图层，占满整个Stack
    Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/background.jpg"),
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 搜索栏层，用Positioned控制位置
    Positioned(
      top: 40, // 距离顶部的距离，可根据需求调整
      left: 16,
      right: 16,
      child: searchBar(),
    ),
  ],
)

关键说明 #

• 用Stack替代Column：Stack的子元素会按顺序堆叠，后添加的子元素会显示在前面的元素上方
• StackFit.expand：让Stack自动填充父组件的可用空间，无需手动设置高度
• Positioned：精准控制搜索栏的位置，top/left/right参数可灵活调整，实现类似BlaBlaCar的顶部偏下的搜索栏布局
• 移除原有的Expanded：Stack已处理空间填充，不需要再用Expanded约束背景图高度

如果需要保留背景图占屏幕80%高度的初始需求，可以给背景图容器套一层ConstrainedBox：

Stack(
  children: [
    ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: MediaQuery.of(context).size.height * 0.8,
      ),
      child: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/background.jpg"),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
    Positioned(
      top: 40,
      left: 16,
      right: 16,
      child: searchBar(),
    ),
  ],
)

这样背景图仅占屏幕上80%区域，搜索栏依然叠加在它上方，符合你的布局需求。

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