Flutter中第二个SliverAppBar出现异常顶部padding如何解决

应用异常顶部padding效果截图

编写了两个Flutter页面类：第一个类配置顶层AppBar，调用第二个类；第二个类内置吸附置顶的SliverAppBar承载可滚动列表项，第二个SliverAppBar出现异常顶部内边距，多次尝试未解决。

外层页面代码 #

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            extendBodyBehindAppBar: true,
            bottomNavigationBar: BottomNavBar(0, _currentAccount),
            appBar: PreferredSize(
              preferredSize:
                  Size.fromHeight(MediaQuery.of(context).size.height / 7),
              child: Column(
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: const BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topRight,
                            end: Alignment.bottomLeft,
                            colors: <Color>[
                          Color(0xFF894c56),
                          Color(0xFFa80d0d)
                        ])),
                    child: Padding(
                        padding: const EdgeInsets.only(bottom: 30),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              const Padding(
                                  padding: EdgeInsets.only(top: 50, left: 5),
                                  child: Text(
                                    'Votre évenement ',
                                    style: TextStyle(
                                        fontSize: 15, color: Colors.grey),
                                  )),
                              Padding(
                                padding: const EdgeInsets.only(top: 5, left: 5),
                                child: Text(
                                  event,
                                  style: const TextStyle(
                                      color: Colors.white, fontSize: 17),
                                ),
                              )
                            ])),
                  )
                ],
              ),
            ),
            body: ListPrestat('Traiteur', _currentAccount)
            ));
  }

内嵌滚动页ListPrestat代码 #

@override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            toolbarHeight: 50,
            expandedHeight: 0,
            backgroundColor: const Color(0xFFDCDCDC),
            pinned: true,
            leading: IconButton(
              icon: const Icon(
                Icons.arrow_back,
                color: Color(0xFFDC3535),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MainScreen(_currentAccount)),
                );
              },
            ),
            centerTitle: true,
            shadowColor: Colors.black,
            elevation: 10,
            bottom: const PreferredSize(
                preferredSize: Size.fromHeight(0),
                child: TagList(ListCat: 'brouette')),
            title: Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.all(MediaQuery.of(context).size.width / 4),
                child: Text(
                  _currentCat,
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 16.0,
                    fontWeight: FontWeight.w700,
                  ),
                )),
          ),
          SliverFixedExtentList(
            itemExtent: 110.0,
            delegate: SliverChildListDelegate(
              [
                for (int index = 0; index < 5; index++)
                  CustomListItem2(
                    thumbnail: ClipRRect(
                        borderRadius: BorderRadius.circular(8.0),
                        child: AspectRatio(
                          child: Image.network(
                            growableList[index],
                            width: 100.0,
                            height: 100.0,
                            fit: BoxFit.fill,
                          ),
                          aspectRatio: 1 / 1,
                        )),
                    title: 'Chez Luigi',
                    subtitle: 'Les meilleurs pizza hors d'italie.',
                    ListCat: 'Food Truck',
                  ),
              ],
            ),
          )
        ],
      ),
    );
  }

SliverAppBar默认primary属性为true，会自动为系统状态栏预留高度的顶部内边距。外层Scaffold开启了extendBodyBehindAppBar: true，自定义的外层AppBar已经手动处理了状态栏顶部间距（代码中写了EdgeInsets.only(top: 50, left: 5)），内层SliverAppBar又自动叠加了一遍状态栏高度的padding，最终出现多余的顶部空白。

两种方案任选其一即可：

• 方案1：给内层SliverAppBar添加primary: false属性，关闭自动预留状态栏间距的逻辑
  修改后的SliverAppBar核心片段：

  SliverAppBar(
    primary: false, // 新增该行
    toolbarHeight: 50,
    expandedHeight: 0,
    backgroundColor: const Color(0xFFDCDCDC),
    pinned: true,
    // 其余原有属性保持不变
  )
  

• 方案2：用MediaQuery.removePadding包裹内层滚动组件，移除上下文自动带有的顶部状态栏padding

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: SizedBox(
        // 原有SizedBox及内部CustomScrollView的全部代码保持不变
      ),
    );
  }
  

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