Flutter實(shí)現(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;//當(dāng)前選中項(xiàng)的索引
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),//居中顯示某個(gè)文本
),
//底部導(dǎo)航按鈕,包含圖標(biāo)及文本
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.chat),backgroundColor:Colors.green,title: Text('微信')),//設(shè)置背景顏色和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,//當(dāng)前選中項(xiàng)的索引
fixedColor: Colors.deepPurple,//選項(xiàng)中項(xiàng)的顏色
onTap:_onItemTapped,//選擇按下處理
),
);
}
//選擇按下處理
void _onItemTapped(int index)
{
setState(() {
_selectedIndex = index;
});
}
}
總結(jié)
以上所述是小編給大家介紹的Flutter實(shí)現(xiàn)仿微信底部菜單欄功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
用簡(jiǎn)單的腳本實(shí)現(xiàn)一款漂亮的下拉菜單
用簡(jiǎn)單的腳本實(shí)現(xiàn)一款漂亮的下拉菜單...2006-12-12
防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方法
這篇文章主要介紹了防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方式的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10
8 行 Node.js 代碼實(shí)現(xiàn)代理服務(wù)器
JavaScript 前后端通吃,在全棧開(kāi)發(fā)領(lǐng)域具有獨(dú)特的優(yōu)勢(shì)。今天就來(lái)看看作為服務(wù)端語(yǔ)言的 JavaScript,完成一個(gè)簡(jiǎn)單的代理服務(wù)器功能是多么容易。2016-12-12
JavaScript數(shù)組問(wèn)題解決的多種方法
JavaScript數(shù)組問(wèn)題多種方法小結(jié),眾多blueidea高手聯(lián)袂打造2008-07-07
JavaScript逆向調(diào)試技巧總結(jié)分享
當(dāng)我們抓取網(wǎng)頁(yè)端數(shù)據(jù)時(shí),經(jīng)常被加密參數(shù)、加密數(shù)據(jù)所困擾,如何快速定位這些加解密函數(shù),尤為重要,下面這篇文章主要給大家介紹了關(guān)于JavaScript逆向調(diào)試技巧的相關(guān)資料,需要的朋友可以參考下2022-06-06

