Flutter实现底部导航栏

 更新时间:2022年03月23日 10:20:49   作者:夏沫凡尘  
这篇文章主要为大家详细介绍了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 StatefulWidget {
 @override
 GuoheState createState() => new GuoheState();
}
 
class GuoheState extends State<Guohe> {
 @override
 Widget build(BuildContext context) {
 
 }
}

创建today.dart、kb.dart、playground.dart三个页面文件作为tabview的填充文件,这里用playground.dart为例。

import 'package:flutter/material.dart';
 
class Playground extends StatefulWidget {
 @override
 PlaygroundState createState() => new PlaygroundState();
}
 
class PlaygroundState extends State<Playground> {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
  home: new Scaffold(
  appBar: new AppBar(
   title: new Text("操场"),
   backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
   centerTitle: true, //设置标题是否局中
  ),
  body: new Center(
   child: new Text('操场'),
  ),
  ),
 );
 }
}

app.dart的完整代码

/**
 * APP的主入口文件
 */
 
import 'package:flutter/material.dart';
 
import 'package:flutter_guohe/pages/main/today.dart';
import 'package:flutter_guohe/pages/main/playground.dart';
import 'package:flutter_guohe/pages/main/kb.dart';
import 'package:flutter_guohe/pages/main/leftmenu.dart';
 
import 'package:flutter_guohe/common/eventBus.dart';
 
//果核的主界面
class Guohe extends StatefulWidget {
 @override
 GuoheState createState() => new GuoheState();
}
 
class GuoheState extends State<Guohe> with SingleTickerProviderStateMixin {
 TabController controller;
 
 @override
 void initState() {
 controller = new TabController(length: 3, vsync: this);
 }
 
 @override
 void dispose() {
 controller.dispose();
 super.dispose();
 }
 
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
  home: new Scaffold(
  drawer: new LeftMenu(),
  body: new TabBarView(
   controller: controller,
   children: <Widget>[
   new Today(),
   new Kb(),
   new Playground(),
   ],
  ),
  bottomNavigationBar: new Material(
   color: Colors.white,
   child: new TabBar(
   controller: controller,
   labelColor: Colors.deepPurpleAccent,
   unselectedLabelColor: Colors.black26,
   tabs: <Widget>[
    new Tab(
    text: "今日",
    icon: new Icon(Icons.brightness_5),
    ),
    new Tab(
    text: "课表",
    icon: new Icon(Icons.map),
    ),
    new Tab(
    text: "操场",
    icon: new Icon(Icons.directions_run),
    ),
   ],
   ),
  ),
  ),
 );
 }
}

其中

labelColor: Colors.deepPurpleAccent,
unselectedLabelColor: Colors.black26,

第一个属性是控制标签颜色,这里我选了紫色,第二个属性是未选中标签时的颜色。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android开发基础实现最简单的视频播放示例

    Android开发基础实现最简单的视频播放示例

    这篇文章主要为大家介绍了Android开发基础实现最简单的视频播放示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Android OkHttp的简单使用和封装详解

    Android OkHttp的简单使用和封装详解

    这篇文章主要介绍了Android OkHttp的简单使用和封装详解的相关资料,Android OKHttp的简单get、post的使用,再到它的封装,需要的朋友可以参考下
    2016-12-12
  • 如何正确使用Android线程详解

    如何正确使用Android线程详解

    线程是程序员进阶的一道重要门槛。除了了解各类开线程的API之外,更需要理解线程本身到底是个什么样的存在,并行是否真的高效?系统是怎么样去调度线程的?开线程的方式那么多,什么样的姿势才正确?下面通过本文来好好再学习下。
    2016-08-08
  • Android开发悬浮按钮 Floating ActionButton的实现方法

    Android开发悬浮按钮 Floating ActionButton的实现方法

    这篇文章主要介绍了Android开发悬浮按钮 Floating ActionButton的实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    这篇文章主要介绍了Android使用TabLayou+fragment+viewpager实现滑动切换页面效果,需要的朋友可以参考下
    2017-05-05
  • Android实现外部唤起应用跳转指定页面的方法

    Android实现外部唤起应用跳转指定页面的方法

    这篇文章主要给大家介绍了关于Android实现外部唤起应用跳转指定页面的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Android控件Spinner的使用方法(1)

    Android控件Spinner的使用方法(1)

    这篇文章主要为大家详细介绍了Android控件Spinner的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android开发中LayoutInflater用法详解

    Android开发中LayoutInflater用法详解

    这篇文章主要介绍了Android开发中LayoutInflater用法,结合实例形式分析了LayoutInflater类的功能、作用、使用方法及相关注意事项,需要的朋友可以参考下
    2016-08-08
  • Android 仿微信朋友圈点赞和评论弹出框功能

    Android 仿微信朋友圈点赞和评论弹出框功能

    这篇文章主要介绍了Android 仿微信朋友圈点赞和评论弹出框功能的相关资料,非常不错,具有参考解决价值,需要的朋友可以参考下
    2016-11-11
  • Android简单实现文件下载

    Android简单实现文件下载

    这篇文章主要为大家详细介绍了Android简单实现文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论