专栏首页前端开发随笔Flutter实现顶部导航栏功能

Flutter实现顶部导航栏功能

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("推荐"))
          ],
        ));
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter组件随笔练习

    wePanda
  • vue-cropper裁剪图片

    wePanda
  • Js解决微信浏览器刷新的问题

    wePanda
  • Flutter 自定义 TabBar

    TabBar常用于放在AppBar中,以标签页的形式展示同一个页面不同内容的主题标签。

    越陌度阡
  • Hacking with iOS: SwiftUI Edition - Word Scramble 项目——List 介绍

    这个项目将是另一个游戏,尽管实际上这只是我偷偷摸摸地介绍更多Swift和SwiftUI知识的方法!游戏将向玩家显示一个随机的八个字母的单词,并要求他们用单词来制...

    韦弦zhy
  • adb shell 查看系统属性(用来判断特殊的操作系统)

    一般来讲,在android程序开发中进行需要判断设备类型和系统版本 1、设备类型判断(android.os.Build.MODEL) 比如判断属于Google ...

    用户1155943
  • 手机没网了,却还能支付,这是什么原理?

    现在生活已经离不开微信/支付宝电子支付,平常出去吃饭、购物只要带个手机,就可以解决一切,以致于现在已经好久没摸过真?了。

    andyxh
  • NLP之keras中文文本分类系列算法封装,简单易用(超详细教程)

    中文长文本分类、短句子分类、多标签分类、两句子相似度(Chinese Text Classification of Keras NLP, multi-label...

    大数据技术与机器学习
  • 支付宝超级 App 的弹性动态架构实践

    本文基于重岳在 2019 年 DevOps 国际峰会北京站的分享内容进行总结,希望通过本篇文章介绍近些年来支付宝面向超大业务体量的挑战,在移动端构建弹性动态架构...

    开发者技术前线
  • 3. 单页App

    上一篇文章我们创建了 Xamarin 应用程序,当我们创建完应用程序后 VS 2019 帮我们生成了一个名为 MainPage 的 xaml 文件,这个文件在当...

    喵叔

扫码关注云+社区

领取腾讯云代金券