如何在 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?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中获取 AppBar 高度?

Flutter CustomScrollView 自定义滑动效果

Flutter:如何仅在滚动后显示 AppBar?

Flutter:AppBar 背景图片

如何在 Flutter 的 AppBar 中有可点击的文本

如何在 Flutter 中使用 GestureDetector 隐藏 appBar?