Flutter Drawer抽屜菜單示例詳解
本文實例為大家分享了Flutter Drawer抽屜菜單示例代碼,供大家參考,具體內(nèi)容如下
一.Flutter Drawer組件簡介
1.源碼查看
const Drawer({ ? ? Key? key, ? ? this.elevation = 16.0, //陰影效果大小 ? ? this.child, //內(nèi)容元素 ? ? this.semanticLabel, //關閉/打開抽屜時的通知信息 ? })?
二.抽屜菜單示例
1.菜單項,使用 ListTile 實現(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.底部導航欄,使用BottomNavigationBar實現(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; ? ? ? ? ? }); ? ? ? ? }, ? ? ? ),
參考:flutter底部導航欄
3.懸浮按鈕,使用FloatingActionButton實現(xiàn)
floatingActionButton: FloatingActionButton( //懸浮按鈕 ? ? ? ? ? child: Icon(Icons.add), ? ? ? ? ? onPressed:_onAddNum ? ? ? ),
三.Demo及實際效果
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, ? ? ? ? //移除抽屜菜單頂部默認的空白 ? ? ? ? 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( //導航欄 ? ? ? ? title: Text("App Name"), ? ? ? ? actions: <Widget>[ //導航欄右側(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用Android studio創(chuàng)建的AIDL編譯時找不到自定義類的解決辦法
這篇文章主要介紹了使用Android studio創(chuàng)建的AIDL編譯時找不到自定義類的解決辦法的相關資料,需要的朋友可以參考下2016-02-02Android自定義View實現(xiàn)通訊錄字母索引(仿微信通訊錄)
本文主要介紹了Android自定義View實現(xiàn)通訊錄字母索引(仿微信通訊錄)的實現(xiàn)步驟與方法,具有很好的參考價值,下面跟著小編一起來看下吧2016-12-12Flutter使用AnimatedBuilder實現(xiàn)動效復用
Animation和AnimationWidget都是將組件和動畫一起完成的。有些時候,我們只是想動效復用,而不關心組件構(gòu)建,這個時候就可以使用 AnimatedBuilder了。本文詳細講解了AnimatedBuilder的使用,需要的可以參考一下2022-04-04解析Android中實現(xiàn)滑動翻頁之ViewFlipper的使用詳解
有一些場景,我們需要向用戶展示一系列的頁面。比如我們正在開發(fā)一個看漫畫的應用,可能就需要向用戶展示一張一張的漫畫圖片,用戶使用手指滑動屏幕,可以在前一幅漫畫和后一幅漫畫之間切換。這個時候ViewFlipper就是一個很好的選擇2013-05-05android利用websocket協(xié)議與服務器通信
這篇文章主要為大家詳細介紹了android利用websocket協(xié)議與服務器通信,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-03-03