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;
});
}
}
總結(jié)
以上所述是小編給大家介紹的Flutter實現(xiàn)仿微信底部菜單欄功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關文章
AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
AngularJS 是一個 MV* 框架,最適于開發(fā)客戶端的單頁面應用。它不是個功能庫,而是用來開發(fā)動態(tài)網(wǎng)頁的框架。接下來通過本文給大家介紹AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關內(nèi)容,需要的朋友參考下吧2016-04-04
javascript 瀏覽器類型和版本號檢測代碼(兼容多瀏覽器)
果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法,以饗觀眾!2010-04-04
微信小程序canvas.drawImage完全顯示圖片問題的解決
這篇文章主要介紹了微信小程序canvas.drawImage完全顯示圖片問題的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
通過Javascript創(chuàng)建一個選擇文件的對話框代碼
通過Javascript創(chuàng)建一個選擇文件的對話框代碼,需要的朋友可以參考下2012-06-06

