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 相关文章推荐
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
python线程池的实现实例
2013/11/18 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
详解Python中的文本处理
2015/04/11 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python常用函数详解
2016/09/13 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python实现猜拳游戏
2020/03/04 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
跳槽求职信范文
2014/05/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
质量保证书怎么写
2015/02/27 职场文书
秋季运动会加油词
2015/07/18 职场文书
清洁工工作总结
2015/08/11 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL