如何在 Flutter 的 appbar 之外添加 endDrawer?
Posted
技术标签:
【中文标题】如何在 Flutter 的 appbar 之外添加 endDrawer?【英文标题】:How can I add endDrawer outside of appbar in Flutter? 【发布时间】:2021-11-21 23:02:01 【问题描述】:我想在图标按钮上添加一个抽屉,但它在 appbar 之外 在这段代码中,我尝试通过观看一些教程来实现它,但它可能对我不起作用,因为我使用了 endDraw 有人知道怎么做吗?
这是我的代码
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context)
return Scaffold(
key: _scaffoldKey,
endDrawer: Drawer2() ,
appBar: AppBar(
backgroundColor: MyColor.backgroud_primary_color,
leading: Icon(
Icons.chevron_left_rounded,
color: MyColor.icon_color,
),
centerTitle: true,
title: Container(
width: 100,
height: 100,
child: Image(
image: AssetImage("assets/logo.png"),
fit: BoxFit.contain,
),
),
actions: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: IconButton(
onPressed: () => _scaffoldKey.currentState!.openDrawer(),
icon: Icon(Icons.sort),
iconSize: 30,
color: MyColor.icon_color,
),
)
],
),
Drawer2() 是我制作的自定义抽屉,我想在点击图标按钮时打开末端抽屉有什么办法吗?
【问题讨论】:
【参考方案1】:import 'package:flutter/material.dart';
class DemoScreen extends StatelessWidget
const DemoScreen( Key? key ) : super(key: key);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(title: Text("Demo Screen"),),
endDrawer: Drawer2(),
body: Center(
child: Text("data")
),
);
class Drawer2 extends StatelessWidget
const Drawer2(
Key? key,
) : super(key: key);
@override
Widget build(BuildContext context)
return Drawer( // Custom widget must be return Drawer
child: ListTile( //Implement any design on child property
title: Text("Demo tile"),
),
);
【讨论】:
【参考方案2】:用途:
Scaffold.of(context).openEndDrawer()
如果您想禁用拖动行为,请在 Scaffold
中设置:
drawerEnableOpenDragGesture: false,
【讨论】:
【参考方案3】:要打开抽屉,您需要使用_scaffoldKey.currentState!.openEndDrawer(),
基于 endDrawer 文档,here
所以,你的代码应该是:
actions: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: IconButton(
onPressed: () => _scaffoldKey.currentState!.openEndDrawer(),
icon: Icon(Icons.sort),
iconSize: 30,
color: MyColor.icon_color,
),
)
],
【讨论】:
以上是关于如何在 Flutter 的 appbar 之外添加 endDrawer?的主要内容,如果未能解决你的问题,请参考以下文章