Flutter Drawer抽屜菜單示例詳解
本文實(shí)例為大家分享了Flutter Drawer抽屜菜單示例代碼,供大家參考,具體內(nèi)容如下
一.Flutter Drawer組件簡介
1.源碼查看
const Drawer({ ? ? Key? key, ? ? this.elevation = 16.0, //陰影效果大小 ? ? this.child, //內(nèi)容元素 ? ? this.semanticLabel, //關(guān)閉/打開抽屜時(shí)的通知信息 ? })?
二.抽屜菜單示例
1.菜單項(xiàng),使用 ListTile 實(shí)現(xiàn)
Expanded( ? ? ? ? ? ? ? child: ListView( ? ? ? ? ? ? ? ? children: <Widget>[ ? ? ? ? ? ? ? ? ? ListTile( ? ? ? ? ? ? ? ? ? ? leading: const Icon(Icons.person), ? ? ? ? ? ? ? ? ? ? title: const Text('Personal'), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? ListTile( ? ? ? ? ? ? ? ? ? ? leading: const Icon(Icons.message), ? ? ? ? ? ? ? ? ? ? title: const Text('information'), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? ListTile( ? ? ? ? ? ? ? ? ? ? leading: const Icon(Icons.settings), ? ? ? ? ? ? ? ? ? ? title: const Text('about'), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ), ),
2.底部導(dǎo)航欄,使用BottomNavigationBar實(shí)現(xiàn)
bottomNavigationBar: BottomNavigationBar( ? ? ? ? currentIndex: currentIndex, ? ? ? ? type: BottomNavigationBarType.fixed, ? ? ? ? unselectedItemColor: Colors.grey, ? ? ? ? selectedItemColor: Colors.blue, ? ? ? ? /*unselectedLabelStyle:TextStyle( ? ? ? ? ? color: Colors.black ? ? ? ? ),*/ ? ? ? ? items: [ ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.home), ? ? ? ? ? ? ? label: "首頁", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.person), ? ? ? ? ? ? ? label: "通訊錄", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.find_in_page), ? ? ? ? ? ? ? label: "發(fā)現(xiàn)", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.flip_outlined), ? ? ? ? ? ? ? label: "我的", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ], ? ? ? ? ? onTap: (index){ ? ? ? ? ? setState(() { ? ? ? ? ? ? print("the index is :$index"); ? ? ? ? ? ? currentIndex=index; ? ? ? ? ? }); ? ? ? ? }, ? ? ? ),
3.懸浮按鈕,使用FloatingActionButton實(shí)現(xiàn)
floatingActionButton: FloatingActionButton( //懸浮按鈕 ? ? ? ? ? child: Icon(Icons.add), ? ? ? ? ? onPressed:_onAddNum ? ? ? ),
三.Demo及實(shí)際效果
1.mydrawer.dart
import 'package:flutter/material.dart'; ? class MyDrawer extends StatelessWidget { ? const MyDrawer({ ? ? Key? key, ? }) : super(key: key); ? ? @override ? Widget build(BuildContext context) { ? ? return Drawer( ? ? ? elevation: 30, ? ? ? child: MediaQuery.removePadding( ? ? ? ? context: context, ? ? ? ? //移除抽屜菜單頂部默認(rèn)的空白 ? ? ? ? removeTop: true, ? ? ? ? child: Column( ? ? ? ? ? crossAxisAlignment: CrossAxisAlignment.start, ? ? ? ? ? children: <Widget>[ ? ? ? ? ? ? Padding( ? ? ? ? ? ? ? padding: const EdgeInsets.only(top: 30.0), ? ? ? ? ? ? ? child: Row( ? ? ? ? ? ? ? ? children: <Widget>[ ? ? ? ? ? ? ? ? ? Padding( ? ? ? ? ? ? ? ? ? ? padding: const EdgeInsets.symmetric(horizontal: 15.0), ? ? ? ? ? ? ? ? ? ? child: ClipOval( ? ? ? ? ? ? ? ? ? ? ? child: Image.asset( ? ? ? ? ? ? ? ? ? ? ? ? "images/cc.png", ? ? ? ? ? ? ? ? ? ? ? ? width: 60, ? ? ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? Text( ? ? ? ? ? ? ? ? ? ? "jon", ? ? ? ? ? ? ? ? ? ? style: TextStyle(fontWeight: FontWeight.bold), ? ? ? ? ? ? ? ? ? ) ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ), ? ? ? ? ? ? ), ? ? ? ? ? ? Expanded( ? ? ? ? ? ? ? child: ListView( ? ? ? ? ? ? ? ? children: <Widget>[ ? ? ? ? ? ? ? ? ? ListTile( ? ? ? ? ? ? ? ? ? ? leading: const Icon(Icons.person), ? ? ? ? ? ? ? ? ? ? title: const Text('Personal'), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? ListTile( ? ? ? ? ? ? ? ? ? ? leading: const Icon(Icons.message), ? ? ? ? ? ? ? ? ? ? title: const Text('information'), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ? ListTile( ? ? ? ? ? ? ? ? ? ? leading: const Icon(Icons.settings), ? ? ? ? ? ? ? ? ? ? title: const Text('about'), ? ? ? ? ? ? ? ? ? ), ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ), ? ? ? ? ? ? ), ? ? ? ? ? ], ? ? ? ? ), ? ? ? ), ? ? ); ? } }
2.MainPage.dart
import 'package:flutter/material.dart'; import 'findpage.dart'; import 'mypage.dart'; import 'contactpage.dart'; import 'homepage.dart'; import 'mydrawer.dart'; ? class MainPage extends StatefulWidget{ ? const MainPage({Key? key}) : super(key: key); ? ? @override ? State<StatefulWidget> createState()=>_MainPageState(); } ? class _MainPageState extends State<MainPage>{ ? ? var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()]; ? var currentIndex=0; ? ? ? @override ? Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? appBar: AppBar( //導(dǎo)航欄 ? ? ? ? title: Text("App Name"), ? ? ? ? actions: <Widget>[ //導(dǎo)航欄右側(cè)分享菜單 ? ? ? ? ? IconButton(icon: Icon(Icons.share), onPressed: () {}), ? ? ? ? ], ? ? ? ), ? ? ? drawer: MyDrawer(), //菜單抽屜 ? ? ? body: allPages[currentIndex], ? ? ? backgroundColor: Colors.green, ? ? ? bottomNavigationBar: BottomNavigationBar( ? ? ? ? currentIndex: currentIndex, ? ? ? ? type: BottomNavigationBarType.fixed, ? ? ? ? unselectedItemColor: Colors.grey, ? ? ? ? selectedItemColor: Colors.blue, ? ? ? ? /*unselectedLabelStyle:TextStyle( ? ? ? ? ? color: Colors.black ? ? ? ? ),*/ ? ? ? ? items: [ ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.home), ? ? ? ? ? ? ? label: "首頁", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.person), ? ? ? ? ? ? ? label: "通訊錄", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.find_in_page), ? ? ? ? ? ? ? label: "發(fā)現(xiàn)", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.flip_outlined), ? ? ? ? ? ? ? label: "我的", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ], ? ? ? ? ? onTap: (index){ ? ? ? ? ? setState(() { ? ? ? ? ? ? print("the index is :$index"); ? ? ? ? ? ? currentIndex=index; ? ? ? ? ? }); ? ? ? ? }, ? ? ? ), ? ? ? ? floatingActionButton: FloatingActionButton( //懸浮按鈕 ? ? ? ? ? child: Icon(Icons.add), ? ? ? ? ? onPressed:_onAddNum ? ? ? ), ? ? ); ? } ? void _onAddNum(){ ? } }
3.效果
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android開發(fā)之Service用法實(shí)例
這篇文章主要介紹了Android開發(fā)之Service用法,實(shí)例分析了Android中Service的功能及使用技巧,需要的朋友可以參考下2015-05-05使用Android studio創(chuàng)建的AIDL編譯時(shí)找不到自定義類的解決辦法
這篇文章主要介紹了使用Android studio創(chuàng)建的AIDL編譯時(shí)找不到自定義類的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-02-02Android動(dòng)畫系列之幀動(dòng)畫和補(bǔ)間動(dòng)畫的示例代碼
Android 提供三種動(dòng)畫:幀動(dòng)畫、補(bǔ)間動(dòng)畫和屬性動(dòng)畫,本篇文章介紹幀動(dòng)畫以及補(bǔ)間動(dòng)畫的使用,屬性動(dòng)畫的使用將在后面的文章中分享,那就來復(fù)習(xí)一下這兩種動(dòng)畫的使用吧2020-09-09Android自定義View實(shí)現(xiàn)通訊錄字母索引(仿微信通訊錄)
本文主要介紹了Android自定義View實(shí)現(xiàn)通訊錄字母索引(仿微信通訊錄)的實(shí)現(xiàn)步驟與方法,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2016-12-12Flutter使用AnimatedBuilder實(shí)現(xiàn)動(dòng)效復(fù)用
Animation和AnimationWidget都是將組件和動(dòng)畫一起完成的。有些時(shí)候,我們只是想動(dòng)效復(fù)用,而不關(guān)心組件構(gòu)建,這個(gè)時(shí)候就可以使用 AnimatedBuilder了。本文詳細(xì)講解了AnimatedBuilder的使用,需要的可以參考一下2022-04-04android layout XML解析錯(cuò)誤的解決方法
從別的地方復(fù)制過來XML時(shí),layout預(yù)覽時(shí)提示解析錯(cuò)誤。2013-04-04解析Android中實(shí)現(xiàn)滑動(dòng)翻頁之ViewFlipper的使用詳解
有一些場景,我們需要向用戶展示一系列的頁面。比如我們正在開發(fā)一個(gè)看漫畫的應(yīng)用,可能就需要向用戶展示一張一張的漫畫圖片,用戶使用手指滑動(dòng)屏幕,可以在前一幅漫畫和后一幅漫畫之間切換。這個(gè)時(shí)候ViewFlipper就是一個(gè)很好的選擇2013-05-05android利用websocket協(xié)議與服務(wù)器通信
這篇文章主要為大家詳細(xì)介紹了android利用websocket協(xié)議與服務(wù)器通信,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03