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-108 行 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-12JavaScript數(shù)組問(wèn)題解決的多種方法
JavaScript數(shù)組問(wèn)題多種方法小結(jié),眾多blueidea高手聯(lián)袂打造2008-07-07JavaScript逆向調(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