首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter实现顶部导航栏功能

Flutter实现顶部导航栏功能

作者头像
明知山
发布2020-09-03 11:22:54
1.9K0
发布2020-09-03 11:22:54
举报
文章被收录于专栏:前端开发随笔前端开发随笔
import 'package:flutter/material.dart';
class AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
    //导航栏的长度
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Text("AppBarDemoPage"),
          backgroundColor: Colors.red,
          centerTitle: true,
          bottom: TabBar(
            // isScrollable: true, //可滚动
            indicatorColor: Colors.blueGrey, //指示器的颜色
            labelColor: Colors.blueGrey, //选中文字颜色
            unselectedLabelColor: Colors.white, //为选中文字颜色
            // indicatorSize: TabBarIndicatorSize.label, //指示器与文字等宽
            tabs: <Widget>[
              Tab(text: "热门"),
              Tab(text: "推荐"),
              Tab(text: "好友"),
              Tab(text: "动态"),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Container(
              child: Text("hello"),
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第四个tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

如果底部导航栏和顶部导航栏同时存在的

在这里只写顶部导航栏的实现,底部的可以参照我之前的文章

tabbar导航栏的实现

import 'package:flutter/material.dart';

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

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

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: <Widget>[
              Expanded(
                child: TabBar(
                  tabs: <Widget>[
                    Tab(text: "精选"),
                    Tab(text: "电影"),
                    Tab(text: "动漫"),
                    Tab(text: "NBA"),
                  ],
                ),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第一个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第四个tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

这么写是对导航栏点击做的监听,实现效果一样

import 'package:flutter/material.dart';

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

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

class _NavBarPageState extends State<NavBarPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState(); //length为导航栏的个数
    _tabController = new TabController(vsync: this, length: 2);
    _tabController.addListener(() {
      print(_tabController.index);//打印点击的索引
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("NavBar"),
          bottom: TabBar(
            controller: this._tabController,
            tabs: <Widget>[
              Tab(text: "热销"),
              Tab(text: "推荐"),
            ],
          ),
        ),
        body: TabBarView(
          controller: this._tabController,
          children: <Widget>[
            Center(child: Text("热销")),
            Center(child: Text("推荐"))
          ],
        ));
  }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-03-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档