Flutter 自定義Drawer 滑出位置的大小實例代碼詳解
更新時間：2020年04月17日 10:18:54 作者：三掌柜666
這篇文章主要介紹了Flutter 自定義Drawer 滑出位置的大小,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Flutter開發(fā)過程中，Drawer控件的使用頻率也是比較高的，其實有過移動端開發(fā)經(jīng)驗的人來說，F(xiàn)lutter中的Drawer控件就相當于ios開發(fā)或者Android開發(fā)中的“抽屜”效果，從側邊欄滑出導航菜單。對于Flutter中的Drawer控件的常規(guī)用法就不多介紹，網(wǎng)上大把的教程。
那么本篇博文分享一個網(wǎng)上教程不多的一個知識點，那就是自定義Drawer的滑出位置的大小，自定義Drawer滑出位置就需要修改一個double的widthPercent屬性，widthPercent一般默認值是0.7，然后想要修改widthPercent的默認值，或者設置想要的任何大于0小于1之間的值都可以根據(jù)這個來設置。具體操作如下所示：
1、首先封裝這個方法（看官可以直接復制使用）
class CustomDrawer extends StatelessWidget {
final double elevation;
final Widget child;
final String semanticLabel;
final double widthPercent;
const CustomDrawer({
Key key,
this.elevation = 16.0,
this.child,
this.semanticLabel,
this.widthPercent = 0.7,
}) :
assert(widthPercent!=null&&widthPercent<1.0&&widthPercent>0.0)
,super(key: key);
@override
Widget build(BuildContext context) {
assert(debugCheckHasMaterialLocalizations(context));
String label = semanticLabel;
switch (defaultTargetPlatform) {
case TargetPlatform.iOS:
label = semanticLabel;
break;
case TargetPlatform.android:
case TargetPlatform.fuchsia:
label = semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;
}
final double _width=MediaQuery.of(context).size.width*widthPercent;
return Semantics(
scopesRoute: true,
namesRoute: true,
explicitChildNodes: true,
label: label,
child: ConstrainedBox(
constraints: BoxConstraints.expand(width: _width),
child: Material(
elevation: elevation,
child: child,
),
),
);
}
}
2、調(diào)用的地方
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new AccountManagersPage('')));
},
child: new CustomDrawer( //調(diào)用修改Drawer的方法
widthPercent:0.5, //設置Drawer滑出位置居屏幕的一半寬度
child: Container(
color: Color(0xFF1F1D5B),
child: Column(
children: <Widget>[
Expanded(
child: ListView(children: <Widget>[
Column(
children: <Widget>[
ListTile(
title: Text('設備列表',
style: TextStyle(color: Color(0xFF8B89EF))),
contentPadding: EdgeInsets.symmetric(
horizontal: 15.0, vertical: 0.0),
),
ListTile(
leading: CircleAvatar(
backgroundImage: new ExactAssetImage(
'images/menu_lamp_pole.png'),
radius: 15.0,
),
title: Text('燈桿',
style: TextStyle(
color: Color(0xFFffffff),
fontSize: 18.0,
)),
onTap: () {
Navigator.of(context).pop();
//Navigator.of(context).push(new MaterialPageRoute(builder:(BuildContext context) => new BigScreenPage(0,'燈桿列表')));
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) =>
new MainPoleView()));
}),
// Divider(),
ListTile(
leading: CircleAvatar(
backgroundImage:
new ExactAssetImage('images/menu_charge.png'),
radius: 15.0,
),
title: Text('充電樁',
style: TextStyle(
color: Color(0xFFffffff),
fontSize: 18.0,
)),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) =>
new BigScreenPage(6, '充電樁列表')));
}),
],
)
]),
)
],
),
),
),
);
}
實現(xiàn)效果如下所示：
總結
到此這篇關于Flutter 自定義Drawer 滑出位置的大小的文章就介紹到這了,更多相關flutter 自定義drawer內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Android編程中軟鍵盤基本用法,結合實例形式分析了Android軟鍵盤的顯示、隱藏與使用注意事項,需要的朋友可以參考下2016-10-10
簡單掌握Android Widget桌面小部件的創(chuàng)建步驟
這篇文章主要介紹了簡單掌握Android Widget桌面小部件的創(chuàng)建步驟,Widget一般采用web前端技術進行開發(fā),需要的朋友可以參考下2016-03-03
這篇文章主要介紹了Android調(diào)用手機拍照功能的方法,實例分析了Android調(diào)用手機拍照功能及顯示圖片的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Android使用VideoView播放本地視頻和網(wǎng)絡視頻的方法
本文將講解如何使用Android視頻播放器VideoView來播放本地視頻和網(wǎng)絡視頻，實現(xiàn)起來還是比較簡單的，有需要的可以參考借鑒。2016-08-08
Android使用AudioManager修改系統(tǒng)音量的方法
這篇文章主要介紹了Android使用AudioManager修改系統(tǒng)音量的方法,結合實例形式分析了AudioManager調(diào)節(jié)音量的常用方法及相關使用技巧,需要的朋友可以參考下2016-08-08
Android Google AutoService框架使用詳解
AutoService是Google開發(fā)一個自動生成SPI清單文件的框架。看過一些基于APT的三方框架源碼的讀者應該有所了解。比如Arouter、EventBus等等2022-11-11
最近使用kotlin重構項目,遇到了一個小問題,在Java中,可能會遇到判斷某個對象是否為空,為空執(zhí)行一段邏輯,不為空執(zhí)行另外一段邏輯,下面這篇文章主要給大家介紹了關于Kotlin中空判斷與問號和感嘆號標識符處理操作的相關資料,需要的朋友可以參考下2022-12-12
Android如何實現(xiàn)社交應用中的評論與回復功能詳解
目前，各種App的社區(qū)或者用戶曬照片、發(fā)說說的地方，都提供了評論功能，為了更好地學習，自己把這個功能實現(xiàn)了一下，下面這篇文章主要給大家介紹了關于Android如何實現(xiàn)社交應用中的評論與回復功能的相關資料，需要的朋友可以參考下2018-07-07
android工程下不能運行java main程序的解決方法
這篇文章主要介紹了android工程下不能運行java main程序的解決方法,需要的朋友可以參考下2014-05-05
Binder通信機制說來簡單，但是在使用的過程的遇到了一些問題，最后終于解決了，現(xiàn)在曬出來和大家分享一下，希望可以幫助你們2012-11-11