如何在 flutter 中制作持久的 AppBar 和位于 AppBar 下方的浮动小部件

Question

我想让我的 AppBar 持久化（它不应该像 tabbar 那样浮动），同时我想放置一个小部件或者说 tabbar 就在 appbar 下面，它将浮动并固定到 appbar 就像图书馆页面的 spotify 应用程序一样见下文正确理解

到目前为止，我在 flutter 中使用 slivers 无法实现我想要的，请检查我的代码并纠正我，

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Test()),
    );
  }
}
class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(excludeHeaderSemantics: true,
                floating: true,
                           
                pinned: true,
                title: Text('This should be fixed not moving'),
                bottom: TabBar(
                  tabs: [
                    Tab( text: "Call"), // this shoudl be floating n pinned 
                    Tab( text: "Message"),// this should be floating n pinned
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                return Text("Item $index");
              })),
              Container(child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                    return Text("Item $index");
                  })),
            ],
          ),
        ),
      ),
    );

  }
}

Answer 1

您可以在 AppBar 上使用 bottom 属性。

这里有一个 link 示例，说明如何操作：

https://esflutter.dev/docs/catalog/samples/app-bar-bottom

Answer 2

您也可以重组您的 UI 使其像这样：

Scaffold(
  appBar: <HERE_YOUR_APPBAR>,
  body: Column(
    children: [
      TabBar(), // here your tab bar,
      Expanded(
        child: TabBarView() // here your tabs
      )
    ]
  )
)

这样您的 TabBar 将固定在顶部，而 Expanded 将覆盖 Column 的其余部分并填满您的页面。

Answer 3

你应该在 SliverAppBar 之后使用 SliverList 并将你的 TabBar 放在里面。

这就是您要查找的内容。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Test()),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                excludeHeaderSemantics: true,
                floating: true,
                pinned: true,
                title: Text('This should be fixed not moving'),
              ),
              SliverList(
                delegate: SliverChildListDelegate.fixed(
                  [
                    TabBar(
                      labelColor: Colors.blue,
                      tabs: [
                        Tab(text: "Call"),
                        Tab(text: "Message"),
                      ],
                    ),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(
                  child: ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context, index) {
                        return Text("Item $index");
                      })),
              Container(
                  child: ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context, index) {
                        return Text("Item $index");
                      })),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 4

下面的代码有效如我所愿，

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Test()),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                floating: true,
                pinned: true,
                
                title: Text('This should be fixed not moving'),
              ),
              SliverList(
                delegate: SliverChildListDelegate.fixed(
                  [
                    TabBar(
                      labelColor: Colors.blue,
                      tabs: [
                        Tab(text: "Call"),
                        Tab(text: "Message"),
                      ],
                    ),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(
                  child: ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context, index) {
                        return Text("Item $index");
                      })),
              Container(
                  child: ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context, index) {
                        return Text("Item $index");
                      })),
            ],
          ),
        ),
      ),
    );
  }
}

如何在 flutter 中制作持久的 AppBar 和位于 AppBar 下方的浮动小部件

How to make persistent AppBar and floating widget just below AppBar in flutter

flutter

flutter-layout

flutter-sliver

flutter-appbar

flutter-sliverappbar