Flutter 基于TabBar+TabBarView实现顶部导航功能

最新推荐文章于 2024-07-15 11:59:01 发布

小二李

最新推荐文章于 2024-07-15 11:59:01 发布

阅读量353

点赞数

分类专栏： Flutter 文章标签： flutter TabBar

本文链接：https://blog.csdn.net/weixin_43800535/article/details/123057257

版权

Flutter 专栏收录该内容

53 篇文章 1 订阅

订阅专栏


class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  var listener;
  TabController _controller;
  var tabs = ["推荐", "热门", "推荐", "热门", "推荐", "热门", "推荐", "热门", "推荐", "热门"];
  @override
  void initState() {
    super.initState();

    _controller = TabController(length: tabs.length, vsync: this);

    // 监听压栈出栈
    HiNavigator.getInstance().addListener(this.listener = (current, pre) {
      if (widget == current || current.page is HomePage) {
        print('打开首页:onResume');
      } else if (widget == pre?.page || pre.page is HomePage) {
        print('首页：onPause');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Container(
              color: Colors.white,
              padding: EdgeInsets.only(top: 30),
              child: _tabBar(),
            ),
            Flexible(
              child: TabBarView(
                  controller: _controller,
                  children: tabs.map((tab) {
                    return HomeTabPage(tab);
                  }).toList()),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;

  _tabBar() {
    return TabBar(
      controller: _controller,
      isScrollable: true, // 是否允许滚动
      labelColor: Colors.black,
      indicator: UnderlineIndicator(
          // 指示器
          strokeCap: StrokeCap.round,
          borderSide: BorderSide(color: primary, width: 3),
          insets: EdgeInsets.only(left: 15, right: 15)),
      tabs: tabs.map<Tab>((tab) {
        return Tab(
          child: Padding(
            padding: EdgeInsets.only(left: 5, right: 5),
            child: Text(
              tab,
              style: TextStyle(fontSize: 16),
            ),
          ),
        );
      }).toList(),
    );
  }
}