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实现底部导航栏效果

    大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航.下面给大家贴出底部导航的编写,主要参考了lime这个项目. 上代码 一.在main.dart文件中 定义APP的基本信息 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new

  • flutter BottomAppBar实现不规则底部导航栏

    本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 /** * 有状态StatefulWidget * 继承于 StatefulWidget,通过 State 的 build 方法去构建控件 */

  • Flutter实现底部和顶部导航栏

    Flutter底部和顶部导航栏的实现,供大家参考,具体内容如下 带文字图标的底部导航栏(使用BottomNavigationBar和BottomNavigationBarItem)来实现效果 (可以实现图片很文字,可以监听点击改变图片和文字的颜色) /* * BottomNavigationBarItem的一些属性           * const BottomNavigationBarItem({           * 图标           @required this.icon,  

  • Flutter底部导航栏的实现方式

    本文实例为大家分享了Flutter底部导航栏的实现代码,供大家参考,具体内容如下 老规格,先看图: 程序主结构如下: 1.在程序主入口文件main.dart添加如下代码 import 'package:flutter/material.dart'; import 'bottom_navigation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build

  • flutter实现底部导航栏切换

    本文实例为大家分享了flutter实现底部导航栏切换的具体代码,供大家参考,具体内容如下 思路:MaterialApp是提供了bottomnavigationbar的,可以使用,这个已经提供了的widget,再利用每次点击tab的时候使用set state方法来更新屏幕,切换中间的body的widget:main文件: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import '

  • flutter实现底部不规则导航栏

    本文实例为大家分享了flutter实现底部不规则导航栏的具体代码,供大家参考,具体内容如下 scafford的bottomNavigationBar参数赋值BottomAppBar可以实现,BottomAppBar比BottomNavigationBar灵活,在body参数之外准备好一个fab,使用BottomAppBar的shape属性设置BottomAppBar为一个挖了圆形的矩形,设置fab的位置便可: main: import 'package:flutter/cupertino.dar

  • Flutter实现底部导航栏

    本文实例为大家分享了Flutter实现底部导航栏的具体代码,供大家参考,具体内容如下 效果 实现 先将自动生成的main.dart里面的代码删除, import 'package:flutter/material.dart'; import 'package:flutter_guohe/pages/main.dart'; void main() { runApp(new Guohe()); } 创建app.dart作为首页的页面文件 class Guohe extends StatefulWid

  • Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果

    如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态

  • Flutter实现底部导航栏创建详解

    目录 添加依赖项 如何使用 功能 属性 主题 预览图 代码 Flutter web问题:Failed to load network image 我的解决办法 参考资料 ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,支持多种内置样式与动画交互.你可以在https://appbar.codemagic.app/上找到在线样例. 添加依赖项 在你的项目中去 pubspec.添加依赖项: 添加https://pub.dev/packages/convex_bottom_

  • Flutter实现顶部导航栏功能

    本文实例为大家分享了Flutter实现顶部导航栏的具体代码,供大家参考,具体内容如下 import 'package:flutter/material.dart'; class AppBarDemoPage extends StatelessWidget {   const AppBarDemoPage({Key key}) : super(key: key);   @override   Widget build(BuildContext context) {     return Defau

  • 基于jQuery实现顶部导航栏功能

    今天给大家介绍一下,如何利用jQuery实现顶部导航栏功能.其实原理很简单就是利用css和JQuery样式选择器实现的. 下面举个例子具体介绍一下如何这些功能,案例如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery三级下拉列表导航菜单</title> <

  • Taro小程序自定义顶部导航栏功能的实现

    微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon.扩展dom,适配安卓.ios.h5,全面屏. 我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下. 1.NavBar.js import Taro from '@tarojs/taro'; import React, { Component } from 'react' import { V

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

  • 原生JS实现顶部导航栏显示按钮+搜索框功能

    根据点击导航栏,搜索框的内容会随之变动 话不多说,先上图 HTML代码段 <div class="bar"> <ul id="menu" class="menu"> <li class="active">搜店</li> <li class="gradient">地址</li> <li class="gradient&qu

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • 超简单的几行代码搞定Android底部导航栏功能

    超简单,几行代码搞定Android底部导航栏-–应项目需求以及小伙伴的留言,新加了两个方法: 设置底部导航栏背景图片 添加底部导航栏选项卡切换监听事件 底部导航栏的实现也不难,就是下边是几个Tab切换,上边一般是一个FrameLayout,然后FrameLayout中切换fragment. 网上有不少关于Android底部导航栏的文章,不过好像都只是关于下边Tab切的,没有实现Tab与fragment的联动,用的时候还要自己手写这部分代码,对我这个比较懒(据说,懒是程序员的一种美德_#)得程序员

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • uni app仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

随机推荐