Flutter Drawer抽屜菜單示例詳解
更新時間：2022年03月23日 10:46:19 作者：偉雪無痕
這篇文章主要為大家詳細介紹了Flutter Drawer抽屜菜單示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Flutter Drawer抽屜菜單示例代碼，供大家參考，具體內(nèi)容如下
一.Flutter Drawer組件簡介
1.源碼查看
const Drawer({
? ? Key? key,
? ? this.elevation = 16.0, //陰影效果大小
? ? this.child, //內(nèi)容元素
? ? this.semanticLabel, //關(guān)閉/打開抽屜時的通知信息
? })?二.抽屜菜單示例
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.底部導(dǎo)航欄，使用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;
? ? ? ? ? });
? ? ? ? },
? ? ? ),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( //導(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android開發(fā)之Service用法,實例分析了Android中Service的功能及使用技巧,需要的朋友可以參考下2015-05-05
使用Android studio創(chuàng)建的AIDL編譯時找不到自定義類的解決辦法
這篇文章主要介紹了使用Android studio創(chuàng)建的AIDL編譯時找不到自定義類的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家介紹了Android通過BLE傳輸文件遇到問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了android自定義帶箭頭對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Android 提供三種動畫：幀動畫、補間動畫和屬性動畫，本篇文章介紹幀動畫以及補間動畫的使用，屬性動畫的使用將在后面的文章中分享，那就來復(fù)習(xí)一下這兩種動畫的使用吧2020-09-09
Android自定義View實現(xiàn)通訊錄字母索引（仿微信通訊錄）
本文主要介紹了Android自定義View實現(xiàn)通訊錄字母索引（仿微信通訊錄）的實現(xiàn)步驟與方法，具有很好的參考價值，下面跟著小編一起來看下吧2016-12-12
Flutter使用AnimatedBuilder實現(xiàn)動效復(fù)用
Animation和AnimationWidget都是將組件和動畫一起完成的。有些時候，我們只是想動效復(fù)用，而不關(guān)心組件構(gòu)建，這個時候就可以使用 AnimatedBuilder了。本文詳細講解了AnimatedBuilder的使用，需要的可以參考一下2022-04-04
從別的地方復(fù)制過來XML時，layout預(yù)覽時提示解析錯誤。2013-04-04
解析Android中實現(xiàn)滑動翻頁之ViewFlipper的使用詳解
有一些場景，我們需要向用戶展示一系列的頁面。比如我們正在開發(fā)一個看漫畫的應(yīng)用，可能就需要向用戶展示一張一張的漫畫圖片，用戶使用手指滑動屏幕，可以在前一幅漫畫和后一幅漫畫之間切換。這個時候ViewFlipper就是一個很好的選擇2013-05-05
android利用websocket協(xié)議與服務(wù)器通信
這篇文章主要為大家詳細介紹了android利用websocket協(xié)議與服務(wù)器通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03