Flutter drawer側邊欄
今天我們做一個側邊欄,點選頂部的圖示(這是側邊欄元件直接生成的),就可以實現以下的效果啦
複製到main.dart檔案裡就可以執行出根博主一樣的效果哦
(一)效果圖
(二)實現方法
drawer元件以及它自帶的元件實現
column和row元件
背景圖image
頭像clipavatar
(三)程式碼實現
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('側邊欄'),
// centerTitle: true,
),
body:Container(),
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: [
Expanded(
child: UserAccountsDrawerHeader(
accountName: Text("masetr",style: TextStyle(color: Colors.blue,fontSize: 15),),
accountEmail: Text("8888@master.com",style: TextStyle(color: Colors.blue,fontSize: 15)),
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage("images/mouse1.jpg"),
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/mouse2.jpg"),
fit: BoxFit.cover)),
)),
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home,color: Colors.orange,),
),
title: Text("我的空間"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people,color: Colors.orange),
),
title: Text("使用者中心"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings,color: Colors.orange),
),
title: Text("設定中心"),
)
],
),
),
endDrawer: Drawer(//右邊側邊欄
child: Text("right"),
),
));
}
}
相關文章
- Flutter側邊欄控制元件-SideBarFlutter控制元件IDE
- flutter實戰1:完成一個有側邊欄的主介面Flutter
- 自定義側邊快速索引欄索引
- Vue Element Admin 新增側邊欄Vue
- OctoberCMS 外掛學習 側邊欄
- javascript實現動態側邊欄JavaScript
- 微信小程式『側邊欄滑動』特效微信小程式特效
- JavaScript側邊欄顯示和隱藏JavaScript
- TornadoFx實現側邊欄選單效果
- 又一個 iOS 側邊欄元件: SideMenuiOS元件IDE
- vue實現側邊欄手風琴效果Vue
- WordPress新增自定義sidebar側邊欄功能IDE
- Vue後臺管理開發之側邊欄(初稿)Vue
- Typora 隱藏側邊欄圖片資料夾
- Qt介面設計--側邊欄隱藏和滑出QT
- js學習之——網頁側邊欄廣告效果JS網頁
- jQuery側邊欄隱藏和顯示導航jQuery
- 微軟推出全新Win10 App Project Newsbar:桌面右側新聞側邊欄微軟Win10APPProject
- sublime設定預設開啟側邊欄(失敗)
- 影片直播原始碼,預設展開側邊欄選單原始碼
- Flutter 側滑欄及城市選擇UI的實現FlutterUI
- Win10 隱藏左側邊側欄(導航視窗)中的資料夾Win10
- Flutter 系列文章:Flutter Drawer 控制元件介紹Flutter控制元件
- flutter - 自定義 Drawer 元件(不依賴 Scaffold)Flutter元件
- ElementUI側邊欄導航選單隱藏顯示問題UI
- SideNotes:螢幕側邊欄的高效筆記應用IDE筆記
- 點選側邊欄展開和收縮程式碼例項
- 使用ionic中的側邊欄以及angularjs中廣播的使用AngularJS
- vue-element-admin之修改側邊欄的icon圖示Vue
- CSS3實現側邊欄快速定位的隱藏和消失CSSS3
- 直播軟體搭建,通過Android DrawerLayout實現側邊欄功能Android
- iOS 關於側邊欄模態出VC出現的問題iOS
- 如何用 CocosCreator 對接抖音小遊戲的側邊欄復訪遊戲
- vue-element-admin配置側邊欄以及主要模組背景色等Vue
- 線上直播原始碼,JS動態效果之,側邊欄滾動固定效果原始碼JS
- win10選單欄跑到右邊去了如何解決 win10電腦開始欄跑到側邊怎麼辦Win10
- Vue折騰記 - (1)寫一個不大靠譜的二級側邊欄Vue
- Vue折騰記 – (1)寫一個不大靠譜的二級側邊欄Vue