GuidePage底部导航栏
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底部导航栏的更多相关文章
- TextView+Fragment实现底部导航栏
前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...
- Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
- Android 修改底部导航栏navigationbar的颜色
Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().set ...
- Android底部导航栏——FrameLayout + RadioGroup
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...
- Android底部导航栏创建——ViewPager + RadioGroup
原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...
- 二、Fragment+RadioButton实现底部导航栏
在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...
- Android学习笔记- Fragment实例 底部导航栏的实现
1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...
- [置顶]
xamarin android Fragment实现底部导航栏
前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
随机推荐
- cf 893 E
有 次询问,第 次询问包含两个数 . 求满足下面两个要求的 数组的方案数. 1. 数组由 个整数构成 2. A与B不同当且仅当至少存在一个数 满足 .答案对 取模 数据范围: 显 ...
- SQL语句利用日志写shell
outfile被禁止,或者写入文件被拦截: 在数据库中操作如下:(必须是root权限) show variables like '%general%'; #查看配置 set global genera ...
- 微信小程序之wx.showmodal
1. . wx.showModal({ title: "2222步", content: currentCache ? "确定为自己城市添加步数吗" : &qu ...
- PHP(Dom操作)
jsDOM操作组成: ECMAscript:语法核心 BOM:浏览器对象模型 window:窗口 open close 定时器 dingsh history:历史记录 go back location ...
- git 实战
1.网站手动创建新分支 2.在master下 项目路径下 右键 Git branch here 3.切分支: git fetch git branch -a git branch -r git che ...
- Linux中找到占用cpu最高的线程
在工作中,经常会碰到CPU占用100%的情况,那如何找到是那个线程占用了cpu呢? 1. top命令,找到cpu占用最高的进程 2. 查看该进程的线程, top -p <pid> 3. ...
- 转 docker创建私有仓库和k8s中使用私有镜像
docker私有仓库建立 环境说明我们选取192.168.5.2做私有仓库地址yum install docker -y1.启动docker仓库端口服务 docker run -d -p 5000:5 ...
- libvirt虚拟库
转载自:https://www.ibm.com/developerworks/cn/linux/l-libvirt/index.html Libvirt 虚拟化库剖析 讲到向外扩展计算(比如云计算 ...
- 004-mac下Java6与Java8 安装
一.Java6安装 官方下载下载地址:http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-down ...
- 以选项卡的故事扯扯js面向对象
在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说. 以"貌" ...