为什么在flutter App中添加'Sliver AppBar'后显示两个AppBar

Question

我已将 'Sliver AppBar' 添加到我的应用程序的脚手架中，我想知道为什么它现在显示两个应用程序栏。 Scaffold 仅包含一个抽屉，但在 UI 中，它显示了两个抽屉。任何人都知道出了什么问题。

return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        bottom: AppBar(
          title: SizedBox(
            height: 45,
            child: TextField(
              decoration: InputDecoration(
                contentPadding: EdgeInsets.only(top: 5, left: 15),
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {
                  },
                ),
                filled: true,
                fillColor: Colors.white,
                hintText: "What are you looking for ?",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
            ),
          ),
          
        ),
      ),
      
  drawer: Drawer(),
  
);

从代码中删除 SliverAppBar 后，显示空白屏幕。所以，确认这两个AppBar只是来自上面的代码。

Answer 1

SliverAppBar本身是一个appBar，bottom: AppBar是另一个，你可以在bottom上使用PreferredSize。

SliverAppBar(
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(45),
    child: TextField(

为什么在flutter App中添加'Sliver AppBar'后显示两个AppBar

Why it shows two AppBars after adding 'Sliver AppBar' in flutter App

flutter

flutter-layout

flutter-web