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