作者:莫梓智 | 来源:互联网 | 2023-06-10 21:49
Flutter实现仿微信底部菜单栏功能-importpackage:fluttermaterial.dart;voidmain()runApp(MyApp());classMyA
![在这里插入图片描述](https://img1.php1.cn/3cdc5/3345/2be/79a0501b34d22e90.gif)
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;
});
}
}
总结