前言
一、drawer 是什么？
示例：可以快速在实现从左边或者是右边拉出一个抽屉样式的widget，但是纵观国内的app，其实很少使用这样的抽屉样式了。你打卡主流的app 去查看下。
二、使用
1.基础使用
代码如下（示例）：
如果需要抽屉在右边可以使用 endDrawer:，左右抽屉可以同时使用
endDrawer: Drawer(),
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
backgroundColor: Colors.amberAccent,
elevation: 10,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.all(Radius.circular(10))), //形状
child: Column(
children: [
Card(
child: Column(
children: [
const ListTile(
leading: CircleAvatar(
child: Text('我'),
),
title: Text('[email protected]'),
),
ButtonBar(
children: [
TextButton(onPressed: () {
}, child: const Text('编辑')),
TextButton(onPressed: () {
}, child: const Text('编辑'))
],
)
],
),
),
],
),
),
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'Drawer Demo',
),
],
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
2.练习
实现如下图的抽屉
：可以限制抽屉的宽度，抽屉默认是可以自己滑动收回的
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
endDrawer: Drawer(),
drawer: Drawer(
width: 100,
elevation: 10,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.all(Radius.circular(10))), //形状
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/tx.jpeg"),
),
TextButton(
onPressed: null,
child: Column(
children: const [
Icon(
Icons.woman,
color: Colors.black,
),
Text('WOMAN')
],
)),
TextButton(
onPressed: null,
child: Column(
children: const [
Icon(
Icons.man,
color: Colors.black,
),
Text('MAN')
],
)),
TextButton(
onPressed: null,
child: Column(
children: const [
Icon(
Icons.child_care,
color: Colors.black,
),
Text('KIDS')
],
)),
TextButton(
onPressed: null,
child: Column(
children: const [
Icon(
Icons.account_circle,
color: Colors.black,
),
Text('ACCOUNT')
],
)),
TextButton(
onPressed: null,
child: Column(
children: const [
Icon(
Icons.card_travel,
color: Colors.black,
),
Text('CART')
],
)),
TextButton(
onPressed: null,
child: Column(
children: const [
Icon(
Icons.favorite_border,
color: Colors.black,
),
Text('FAVORITE')
],
)),
],
),
),
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'Drawer Demo',
),
],
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
总结
欢迎关注，留言，咨询，交流！
