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开发之imageView图片按比例缩放的实现方法

    Android开发之imageView图片按比例缩放的实现方法

    这篇文章主要介绍了Android开发之imageView图片按比例缩放的实现方法,较为详细的分析了Android中ImageView控件的scaleType属性控制图片缩放的具体用法,需要的朋友可以参考下
    2016-01-01
  • Android游戏开发学习①弹跳小球实现方法

    Android游戏开发学习①弹跳小球实现方法

    这篇文章主要介绍了Android游戏开发学习①弹跳小球实现方法,涉及Android通过物理引擎BallThread类模拟小球运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 解决Android原生定位的坑

    解决Android原生定位的坑

    这篇文章主要介绍了解决Android原生定位的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-02-02
  • Android Studio如何为Activity添加自定义注解信息

    Android Studio如何为Activity添加自定义注解信息

    好久没用写文章了,今天给大家分享Android Studio如何为Activity添加自定义注解信息,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-06-06
  • Android提高之ListView实现自适应表格的方法

    Android提高之ListView实现自适应表格的方法

    这篇文章主要介绍了Android采用ListView实现自适应表格的方法,比较实用的功能,需要的朋友可以参考下
    2014-08-08
  • 有关微博content的封装实现详解

    有关微博content的封装实现详解

    本文将详细介绍关于微博content的封装实现,需要的朋友可以参考下
    2012-11-11
  • 浅谈谈Android 图片选择器

    浅谈谈Android 图片选择器

    近段时间有项目要求写一个类似于微信发送图片时,用来选择照片的一个图片浏览器。相信有很多网友也有这样的需求,这里分享给大家
    2015-12-12
  • android 中使用TableLayout实现表单布局效果示例

    android 中使用TableLayout实现表单布局效果示例

    本篇文章主要介绍了android 中使用TableLayout实现表单布局效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Android setTag方法的key问题解决办法

    Android setTag方法的key问题解决办法

    这篇文章主要介绍了Android setTag方法的key问题解决办法的相关资料,需要的朋友可以参考下
    2016-09-09
  • Android性能优化之Bitmap图片优化详解

    Android性能优化之Bitmap图片优化详解

    在Android项目的imageview中使用大图bitmap时会占据很大的内存,而且在很多时候我们并不需要显示原图那么大的图片, 所以我们需要对图片进行优化,这篇文章主要介绍了Android性能优化之Bitmap图片优化的相关资料,需要的朋友们下面来一起看看吧。
    2017-04-04

最新评论