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

import'package:flutter/material.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbui

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