Flutter實(shí)現(xiàn)仿微信底部菜單欄功能
更新時間:2019年09月18日 09:10:07 作者:幻影坦克TG-009
這篇文章主要介紹了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),//居中顯示某個文本
),
//底部導(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)仿微信底部菜單欄功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
8 行 Node.js 代碼實(shí)現(xiàn)代理服務(wù)器
JavaScript 前后端通吃,在全棧開發(fā)領(lǐng)域具有獨(dú)特的優(yōu)勢。今天就來看看作為服務(wù)端語言的 JavaScript,完成一個簡單的代理服務(wù)器功能是多么容易。2016-12-12
JavaScript逆向調(diào)試技巧總結(jié)分享
當(dāng)我們抓取網(wǎng)頁端數(shù)據(jù)時,經(jīng)常被加密參數(shù)、加密數(shù)據(jù)所困擾,如何快速定位這些加解密函數(shù),尤為重要,下面這篇文章主要給大家介紹了關(guān)于JavaScript逆向調(diào)試技巧的相關(guān)資料,需要的朋友可以參考下2022-06-06

