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 进行输入框自动匹配字符的小例子
Jun 29 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Canvas跟随鼠标炫彩小球的实现
Apr 11 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方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Python代码注释规范代码实例解析
2020/08/14 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
职业女性的职业规划
2014/03/04 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
个人作风建设总结
2014/10/23 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android