Flutter实现仿微信底部菜单栏功能


Posted in Javascript onSeptember 18, 2019

Flutter实现仿微信底部菜单栏功能

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: Scaffold(
    body: MyHomePage(),
   ),
  );
 }
}
class MyHomePage extends StatefulWidget{
 MyHomePage({Key key}) : super(key:key);
 @override
 _MyHomePageState createState() => _MyHomePageState();
 @override
 Widget build(BuildContext context) {
  // TODO: implement build
  return null;
 }
}
class _MyHomePageState extends State<MyHomePage>
{
 int _selectedIndex = 1;//当前选中项的索引
 final _widgetOptions = [
  Text('Index 0: 微信'),
  Text('Index 1: 通讯录'),
  Text('Index 2: 发现'),
  Text('Index 3:我')
 ];
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('仿微信'),
   ),
   body: Center(
    child: _widgetOptions.elementAt(_selectedIndex),//居中显示某个文本
   ),
   //底部导航按钮,包含图标及文本
   bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
     BottomNavigationBarItem(icon: Icon(Icons.chat),backgroundColor:Colors.green,title: Text('微信')),//设置背景颜色和icon的描述
     BottomNavigationBarItem(icon: Icon(Icons.contacts),backgroundColor:Colors.green,title: Text('通讯录')),
     BottomNavigationBarItem(icon: Icon(Icons.account_circle),backgroundColor:Colors.green,title: Text('发现')),
     BottomNavigationBarItem(icon: Icon(Icons.memory),backgroundColor:Colors.green,title: Text('我')),
     ],
//    backgroundColor: Colors.green,
    currentIndex: _selectedIndex,//当前选中项的索引
    fixedColor: Colors.deepPurple,//选项中项的颜色
    onTap:_onItemTapped,//选择按下处理
   ),
  );
 }
 //选择按下处理
void _onItemTapped(int index)
{
 setState(() {
  _selectedIndex = index;
 });
}
}

总结

以上所述是小编给大家介绍的Flutter实现仿微信底部菜单栏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
详解element-ui中表单验证的三种方式
Sep 18 #Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 #Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 #Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 #Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 #Javascript
解决layer 动态加载select 失效的问题
Sep 18 #Javascript
webpack的tree shaking的实现方法
Sep 18 #Javascript
You might like
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python 串口通信的实现
2020/09/29 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
爱国电影观后感
2015/06/19 职场文书
运动会宣传语
2015/07/13 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
财务年终工作总结大全
2019/06/20 职场文书