Flutter中如何让ListView内容从AppBar顶部开始显示

当前ListView默认从AppBar下方开始展示，需调整为从AppBar顶部位置开始显示（内容延伸至AppBar后方），现有代码如下：

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: Size(MediaQuery.of(context).size.width,64),
        child: Container(
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3,sigmaY: 3),
              child: Material(
                elevation: 50.0,
                color: Colors.transparent,
                shadowColor: Colors.black,
                child: SizedBox(
                  height: 88,
                  width: MediaQuery.of(context).size.width,
                  child:  Align(
                    alignment: Alignment.centerLeft,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 20,top: 15),
                      child: Row(
                        children: [
                          const Icon(Icons.line_weight),
                          const SizedBox(width: 15,),
                          Image.asset("assets/images/icon.png",height: 27.36,width: 41.84,),
                          const SizedBox(width: 10,),
                          const Text("Travel Eyes Pvt Ltd", style: TextStyle(
                              fontSize: 12,
                              fontFamily: "Inter",fontWeight: FontWeight.w800,
                              color: Color(0xFF000000),
                              shadows: [
                                Shadow(
                                    offset: Offset(0,4),
                                    blurRadius: 11
                                )
                              ]
                          ),),
                          SizedBox(width: MediaQuery.of(context).size.width - 340,),
                          Container(
                            width: 111.6,
                            height: 27.6,
                            decoration: BoxDecoration(
                                color: const Color(0xFFE53900),
                                borderRadius: BorderRadius.circular(6),
                                border: Border.all(
                                    color: const Color(0xFF000000)
                                ),
                                boxShadow: const[
                                  BoxShadow(
                                    offset: Offset(0, 4),
                                    blurRadius: 4,
                                  )
                                ]
                            ),
                            child: const Center(child: Text("Enquire Now",style: TextStyle(color: Color(0xFFFFFFFF),
                                fontFamily: "Inter", fontWeight: FontWeight.w400,
                                fontSize: 12),)),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
      body: ListView(
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            decoration: const BoxDecoration(
                image: DecorationImage(
              image: AssetImage(
                'assets/images/backgroundHome.png',
              ),
              fit: BoxFit.fill,
              colorFilter:
                  ColorFilter.mode(Colors.black45, BlendMode.difference),
            )),
            child: Align(
                alignment: Alignment.centerLeft,
                child: RichText(
                  text: const TextSpan(
                      style: TextStyle(
                          fontFamily: "Inter",
                          fontSize: 40,
                          fontWeight: FontWeight.bold),
                      children: [
                        WidgetSpan(
                            child: Padding(
                          padding: EdgeInsets.only(left: 60),
                          child: Text("Where Dreams Take Flight:",
                              style: TextStyle(
                                  fontFamily: "Inter",
                                  color: Colors.white,
                                  fontSize: 50,
                                  fontWeight: FontWeight.bold)),
                        )),
                        WidgetSpan(
                            child: Padding(
                          padding: EdgeInsets.only(left: 50),
                          child: Text("Explore the globe with Travel Eyes",
                              style: TextStyle(
                                  fontFamily: "Inter",
                                  color: Colors.white,
                                  fontSize: 50,
                                  fontWeight: FontWeight.bold)),
                        ))
                      ]),
                )),
          ),
          Container(
            color: Colors.orange,
            height: 100,
          )
        ],
      ),
);

当前实现效果 #

期望实现效果 #

解决方法 #

你已经设置了extendBodyBehindAppBar: true，但Scaffold会自动给body添加等于AppBar高度的顶部padding，导致ListView从AppBar下方开始。只需移除这个默认padding即可：

将ListView包裹在MediaQuery.removePadding组件中，设置removeTop: true，修改后的核心代码如下：

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: PreferredSize(
    // 原AppBar代码保持不变
  ),
  body: MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: ListView(
      // 原ListView代码保持不变
    ),
  ),
);

这样调整后，ListView会从屏幕最顶部开始渲染，配合半透明模糊的AppBar，就能实现内容延伸至AppBar后方的效果。

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