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. PHP异常处理、错误捕获和自动加载的一些总结

    <?php // 设置顶层异常处理器 set_exception_handler('exceptionHandler'); function exceptionHandler($e) { ech ...

  2. Web 自动化测试

    Selenium 名字的来源 在这里,我还想说一下关于 Selenium 名字的来源,很有意思的 : > : Selenium 的中文名为 “ 硒 ” ,是一种化学元素的名字,它 对 汞 ( M ...

  3. 1 主机WiFi连接下与虚拟机通信问题

    环境: 主机:win10系统 虚拟机软件:VMware 虚拟机:winserver 2012 R2 datacenter (数据中心版) 网络上有很多方法说设置NAT模式,并不好用,主机如果用网线连接 ...

  4. What do cryptic Github comments mean?

    LGTM  —  looks good to me ACK  —  acknowledgement, i.e. agreed/accepted change NACK/NAK — negative a ...

  5. pytorch入门与实践-2.2

    Tensor 1--本质上可以理解为具有不同维度的数组 2--支持的基本运算 |---创建Tensor:  x=t.tensor(x,y) x,y 表示数组的大小 , x=t.rand(x,y), x ...

  6. C和C指针小记(十五)-结构和联合

    1.结构 1.1 结构声明 在声明结构时,必须列出它包含的所有成员.这个列表包括每个成员的类型和名称. struct tag {member-list} variable-list; 例如 //A s ...

  7. SQL[Err] ORA-00979: not a GROUP BY expression

    Oracle中group by用法 not a GROUP BY expression异常产生是因为group by用法的问题. 在使用group by 时,有一个规则需要遵守,即出现在select列 ...

  8. vsCode如何从github拉取项目

    最近刚使用vscode,有些操作还不太会,所以记录下. 1.开vscode使用CTRL+`或者点击查看到集成终端打开控制终端. 2.在终端中cd到存放文件夹下面,然后git clone https:/ ...

  9. js 循环list

    $.ajax({ type : "POST", data:{ createStartTime:'', createEndTime:'' }, url : "<%=r ...

  10. JAVA 同步之 synchronized 修饰方法

    在JAVA多线程编程中,将需要并发执行的代码放在Thread类的run方法里面,然后创建多个Thread类的对象,调用start()方法,线程启动执行. 当某段代码需要互斥时,可以用 synchron ...