Flutter 自定義Drawer 滑出位置的大小例項程式碼詳解
阿新 • • 發佈：2020-04-17
Flutter開發過程中，Drawer控制元件的使用頻率也是比較高的，其實有過移動端開發經驗的人來說，Flutter中的Drawer控制元件就相當於ios開發或者Android開發中的“抽屜”效果，從側邊欄滑出導航選單。對於Flutter中的Drawer控制元件的常規用法就不多介紹，網上大把的教程。
那麼本篇博文分享一個網上教程不多的一個知識點，那就是自定義Drawer的滑出位置的大小，自定義Drawer滑出位置就需要修改一個double的widthPercent屬性，widthPercent一般預設值是0.7，然後想要修改widthPercent的預設值，或者設定想要的任何大於0小於1之間的值都可以根據這個來設定。具體操作如下所示：
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、呼叫的地方
@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( //呼叫修改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'),title: Text('充電樁',onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) =>
new BigScreenPage(6,'充電樁列表')));
}),],)
]),)
],);
}實現效果如下所示：
總結
到此這篇關於Flutter 自定義Drawer 滑出位置的大小的文章就介紹到這了,更多相關flutter 自定義drawer內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！