您的位置:首页 > 教育 > 锐评 > Flutter——最详细(Drawer)使用教程

Flutter——最详细(Drawer)使用教程

2024/10/6 22:20:43 来源:https://blog.csdn.net/u013290250/article/details/140161163  浏览:    关键词:Flutter——最详细(Drawer)使用教程

背景

应用左侧或右侧导航面板;

属性作用
elevation相当于阴影的大小
import 'package:flutter/material.dart';class CustomDrawer extends StatelessWidget {const CustomDrawer({Key? key}) : super(key: key);Widget build(BuildContext context) {return SizedBox(height: 400,child: Scaffold(appBar: AppBar(title: const Text('Flutter Unit'),),//drawer左边弹出来drawer: Drawer(elevation: 3,child: _buildChild(),),//endDrawer右边弹出来),);}Widget _buildChild() => ListView(padding: EdgeInsets.zero,children: const <Widget>[DrawerHeader(decoration: BoxDecoration(image: DecorationImage(image: AssetImage('assets/images/ic_launcher.png'),fit: BoxFit.cover),),child: Text('怀君',style: TextStyle(fontSize: 24, color: Colors.white, shadows: [Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)]),),),ListTile(leading: Icon(Icons.star,color: Colors.blue,),title: Text('我的收藏'),),ListTile(leading: Icon(Icons.insert_drive_file,color: Colors.green,),title: Text('wodeceshi'),),],);
}

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com