SliverAppBar与TabBar

Question

如何将TabBar添加到SliverAppBar中？到目前为止，当我向bottom添加SliverAppBar时，title被固定在这些选项卡上，而我希望它高于这些选项卡。

有什么想法吗？

​

​

我的代码：

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  TabController controller;


  @override
  void initState() {
    super.initState();
    controller = new TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new CustomScrollView(
        slivers: <Widget>[
          new SliverAppBar(
            pinned: true,
            flexibleSpace: new FlexibleSpaceBar(
              title: new Text("Some title"),
            ),
            expandedHeight: 160.0,
            bottom: new TabBar(tabs: [
              new Tab(text: 'Tab 1'),
              new Tab(text: 'Tab 2'),
              new Tab(text: 'Tab 3'),
            ],
            controller: controller,
            ),
          ),
          new SliverList(
            delegate: new SliverChildBuilderDelegate(
              (context, idx) {
                return new ListTile(
                  title: new Text("$idx"),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

FlexibleSpaceBar被堆放在工具栏和制表栏后面。https://docs.flutter.io/flutter/material/SliverAppBar/flexibleSpace.html

您应该将标题放在SilverAppBar:title而不是flexibleSpace中。

在代码中替换

flexibleSpace: new FlexibleSpaceBar(
                      title: new Text("Some title"),
               ),

使用

title: new Text("Some title"),

Answer 2

您可以使用titlePadding填充：

              SliverAppBar(
                  pinned: true,
                  expandedHeight: 250,
                  primary: true,
                  forceElevated: true,
                  flexibleSpace: FlexibleSpaceBar(
                    titlePadding: EdgeInsets.only(bottom: 62),
                    title: Text(data.name),
                    centerTitle: true,
                    background: data.logo != null
                        ? Padding(
                            padding: const EdgeInsets.only(bottom: 46),
                            child: Container(
                              color: Colors.black,
                            ),
                          )
                        : null,
                  ),
                  bottom: TabBar(
                    tabs: [
                      Tab(text: "Tab1"),
                      Tab(text: "Tab2"),
                      Tab(text: "Tab3"),
                      Tab(text: "Tab4"),
                    ],
                  ),
                ),

Answer 3

class Menu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: SafeArea(
        child: Scaffold(
          body: Consumer<MenuBlock>(
              builder: (context, appController, child) {
            return CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  floating: true,
                  pinned: false,
                  snap: true,
                  forceElevated: true,
                  elevation: 1,
                  expandedHeight: 50.0,
                  title: Text('TITLE'),
                  actions: <Widget>[
                    IconButton(
                      icon: const Icon(Icons.add_circle),
                      tooltip: 'Add new entry',
                      onPressed: () {/* ... */},
                    ),
                  ],
                  bottom: TabBar(
                    tabs: [
                      Tab(text: "TAB1"),
                      Tab(text: "TAB2"),
                    ],
                  ),
                ),
                SliverList(
                  delegate: SliverChildListDelegate(
                    <Widget>[
                      Container(
                        // or SizedBox, etc.
                        height: 4200,
                        child: TabBarView(
                          children: [
                     
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }
}