為什么在 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(