Flutter實現(xiàn)仿微信底部菜單欄功能
更新時間:2019年09月18日 09:10:07 作者:幻影坦克TG-009
這篇文章主要介紹了Flutter實現(xiàn)仿微信底部菜單欄,需要的朋友可以參考下
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: 發(fā)現(xiàn)'), 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('發(fā)現(xiàn)')), 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實現(xiàn)仿微信底部菜單欄功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!