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)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
AngularJS 是一個(gè) MV* 框架,最適于開發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù),而是用來(lái)開發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架。接下來(lái)通過(guò)本文給大家介紹AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關(guān)內(nèi)容,需要的朋友參考下吧2016-04-04
node.js使用nodemailer發(fā)送郵件實(shí)例
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下2014-03-03
javascript 瀏覽器類型和版本號(hào)檢測(cè)代碼(兼容多瀏覽器)
果對(duì)javascript了解不是特別深入的話,很容易就會(huì)寫出不兼容的代碼(就像我),這時(shí)候就得判斷瀏覽器了。比如事件偵聽、一些鼠標(biāo)和鍵盤事件、Range等,一些都會(huì)不一樣.下面列出幾種常用的檢測(cè)瀏覽器方法,以饗觀眾!2010-04-04
關(guān)于驗(yàn)證碼在IE中不刷新的快速解決方法
下面小編就為大家?guī)?lái)一篇關(guān)于驗(yàn)證碼在IE中不刷新的快速解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
js不完美解決click和dblclick事件沖突問(wèn)題
當(dāng)某個(gè)元素,如:div,同時(shí)綁定了click事件和dblclick事件,而這兩個(gè)事件又要處理相對(duì)獨(dú)立的業(yè)務(wù),也就是click的時(shí)候不能觸發(fā)dblclick,dblclick的時(shí)候不能觸發(fā)click2012-07-07
微信小程序canvas.drawImage完全顯示圖片問(wèn)題的解決
這篇文章主要介紹了微信小程序canvas.drawImage完全顯示圖片問(wèn)題的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼,需要的朋友可以參考下2012-06-06

