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=" ...
随机推荐
- C++ string中find() 用法
string中 find()的用法 rfind (反向查找) (1)size_t find (const string& str, size_t pos = 0) const; //查找对 ...
- 调用微信定位功能 lat _ lng php方法
{:wx_jssdk_config("false")} //最主要的这一句 没有这一句在微信浏览器里是无法调用的定位功能的.下面有这个方法说明 <script> wx. ...
- PAT1111 Online Map【最短路】【dfs】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805358663417856 题意: 给定一个图,每天边上有时间和路 ...
- 解决 .net core 中 nuget 包版本冲突问题
今天在一个 asp.net core 项目中遇到了 nuget 包版本冲突的问题,错误信息如下: Version conflict detected for Microsoft.AspNet.WebA ...
- win10系统安装了多个版本的JDK如何切换
本人这台笔记本前面装了jdk8,现在准备用jdk7,我安装好了jdk7:把系统变量中的JAVA_HOME 改为 D:\java\jdk\jdk7\jdk1.7.0_67,Path下添加如下变量,记得加 ...
- webpack项目搭建
1.新建一个文件目录,命令行进入当前目录,输入npm init 创建package.json文件 2.安装项目依赖webpack模块: npm install webpack --save-dev 3 ...
- Kali2安装完成后的设置
1.安装中文输入法 vim /etc/apt/sources.list 全部删除,改为国内源 #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling ...
- 20190422 SQL SERVER 服务
-- 数据库服务-- SQL Server(MSSQLSERVER)是必须要开启的,这个是数据库引擎服务,就像汽车的发动机一样-- SQL Server代理(MSSQLSERVER)是代理服务,比如你 ...
- 认识Charles-proxy 抓包工具
1.为什么不用 Fiddler 抓包工具? 在这里说明一下,因为Fiddler 抓包工具使用C#语言写的,不能在 MAC 上运行,而 Charles-proxy 他是 java 开发的,可以 ...
- 转载一篇较为详细的caffe-ssd编译环境的搭建
这篇搭建的文章写得还是比较全面的,亲测有效:https://blog.csdn.net/lukaslong/article/details/81390276