网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )

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实现仿微信底部菜单栏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:解决使用layui对select append元素无效或者未及时更新的问题
下一篇:详解element-ui中表单验证的三种方式
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap