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