import 'package:flutter/material.dart';
import 'News.dart';
import 'Video.dart';
import 'Chat.dart';
import 'MyId.dart'; class GuidePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => GuidePageState();
} class GuidePageState extends State<GuidePage> {
final _bottomNavigationColor = Colors.red;
int _currentIndex = ;
List<Widget> list = List(); @override
void initState() {
list
..add(NewsPage())
..add(VideoPage())
..add(ChatPage())
..add(MyIdPage());
super.initState();
} @override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.fiber_new,
color: _bottomNavigationColor,
),
title: Text(
'信息',
style: TextStyle(color: _bottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.live_tv,
color: _bottomNavigationColor,
),
title: Text(
'视频',
style: TextStyle(color: _bottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.phone_in_talk,
color: _bottomNavigationColor,
//color:Colors.lightGreen,
),
title: Text(
'聊天',
style: TextStyle(color: _bottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.contact_phone,
color: _bottomNavigationColor,
),
title: Text(
'注册',
style: TextStyle(color: _bottomNavigationColor),
)),
],
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
//设置当前的索引
_currentIndex = index;
});
},
//设置显示的模式
type: BottomNavigationBarType.fixed,
),
);
}
}
import 'package:flutter/material.dart';
import 'Guide.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Generated App',
theme: new ThemeData(
primarySwatch: Colors.red,
primaryColor: const Color(0xFFf44336),//顶部标题导航背景色
accentColor: const Color(0xFFf44336),
canvasColor: const Color(0xffEEEFF2),
fontFamily: 'Roboto',
),
home: GuidePage(),
);
}
}
import 'package:flutter/material.dart';

class MyIdPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyIdPageState();
} class MyIdPageState extends State<MyIdPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('注册'),
),
);
}
}

GuidePage底部导航栏的更多相关文章

  1. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  2. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  3. Android 修改底部导航栏navigationbar的颜色

    Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().set ...

  4. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  5. Android底部导航栏创建——ViewPager + RadioGroup

    原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...

  6. 二、Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...

  7. Android学习笔记- Fragment实例 底部导航栏的实现

    1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...

  8. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  9. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

随机推荐

  1. JAVA课程课后作业03之动手动脑

    一.构造函数 问题一: 错误代码如图: 错误原因:从图片中的编译报错的地方来看,程序是在给新的对象分配空间是出现了问题,因而我们往下观察Foo类,Foo类的构造方法是有一个参数的有参方法,而前面构造新 ...

  2. Nest.js WebSocket

    Docs: https://docs.nestjs.com/websockets/gateways λ yarn add @nestjs/websockets λ nest g ga events e ...

  3. StreamSocket

    转载自:http://blog.csdn.net/yuanguozhengjust/article/details/19175085 StreamSocket的基本流程和一般的Socket通信操作类似 ...

  4. 怎么用js实现jq的removeClass方法

    1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...

  5. 2018-2019-2 20175320实验一《Java开发环境的熟悉》实验报告

    2018-2019-2 20175320实验一<Java开发环境的熟悉>实验报告 一.实验步骤及内容 (一)带包程序的编译运行 1.使用mkdir命令创建如图所示目录 2.进入exp1下的 ...

  6. css学习_css定位

    1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute  (拼爹型: ...

  7. Cardinal and Ordinal Numbers

    Cardinal Numbers Table of Cardinal Numbers Cardinal numbers from 1 through 1,000,000 1 one 11 eleven ...

  8. Mycat原理、应用场景

    Mycat原理 Mycat的原理并不复杂,复杂的是代码,如果代码也不复杂,那么早就成为一个传说了.Mycat的原理中最重要的一个动词是“拦截”,它拦截了用户发送过来的SQL语句,首先对SQL语句做了一 ...

  9. js--单选按钮赋值

    var sex='${userInfo.sex}'; if(sex=="女"){ $("input[name=sex][value='女']").attr(&q ...

  10. java框架之Spring(5)-注解驱动开发

    准备 1.使用 maven 创建一个 java 项目,依赖如下: <dependency> <groupId>org.springframework</groupId&g ...