使用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
{
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(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怎么实现一个底部菜单栏功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。