php仿微信底部菜单,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实现仿微信底部菜单栏功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！