如何在Flutter的SliverAppBar中添加Tabbar? [英] How to add Tabbar in SliverAppBar on Flutter?

问题描述

我们可以在SliverAppBar中添加TabBar吗?

Can we add TabBar in our SliverAppBar?

因为SliverAppBar具有bottom属性，所以我认为我们可以在SliverAppBar中添加Tabbar，但是问题是TabBar需要DefaultTabbarController和DefaultTabbarController仅在Material Widget中起作用，而SliverAppbar仅在Scaffold Body中起作用，而在我的appbar中不起作用，但是我需要脚手架主体具有TabView.有什么解释?

Since SliverAppBar has the bottom property, I thought we can add Tabbar in our SliverAppBar, but the problem is TabBar needs DefaultTabbarController and DefaultTabbarController only works in Material Widget and SliverAppbar only works in Scaffold Body, not in my appbar, but I need my scaffold body to have TabView. What is the explanation?

推荐答案

我能够实现您的要求.但是我只有一个问题，即，当我在TabView中添加滚动小部件时，它不会产生所需的结果.

I was able to achieve what you was asking. But I have only one problem, i.e., when I add a scrolling widget in TabView it doesn't produce the required result.

我已经打开 GitHub上的一个问题.

这是我的代码:

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomePageState();
}

class HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    Color tabColor = Theme.of(context).primaryColorDark;
    TextStyle tabStyle = TextStyle(color: tabColor);
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text("AppBar"),
              floating: true,
              primary: true,
              pinned: false,
            ),
            SliverFillRemaining(
              child: Scaffold(
                appBar: TabBar(
                controller: tabController,
                tabs: <Widget>[
                  Tab(
                    child: Text(
                      'Tab1',
                     style: tabStyle,
                    ),
                  ),
                  Tab(
                    child: Text(
                      'Tab2',
                    style: tabStyle,
                    ),
                  ),
                ],
              ),
                body: TabBarView(
                  controller: tabController,
                  children: <Widget>[
                    Scaffold(
                      body: Text('Tab One'),
                    ),
                    Scaffold(
                      body: Text('Tab Two'),
                    ),
                  ],
                ),
              ),
              ),
          ],
        ),
      ),
    );
  }
}

这篇关于如何在Flutter的SliverAppBar中添加Tabbar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！