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