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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
详解JavaScript 的变量
Mar 08 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
js实现三角形粒子运动
Sep 22 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 编程的 5个良好习惯
2009/02/20 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP中的替代语法介绍
2015/01/09 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
extjs render 用法介绍
2013/09/11 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
python通过函数属性实现全局变量的方法
2015/05/16 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python单例设计模式实现解析
2020/01/07 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
质量保证书格式模板
2015/02/27 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
走近毛泽东观后感
2015/06/04 职场文书
教师个人教学反思
2016/02/23 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python