带有自定义按钮的导航抽屉

Posted 2023-04-13

【中文标题】带有自定义按钮的导航抽屉

【英文标题】：Navigation Drawer with Custom Button

【发布时间】：2020-01-18 18:56:11

【问题描述】：

我目前正在尝试为我的应用设置一个搜索栏，如下图所示。目前我有一个可以很好地用作搜索栏的小部件，但我正在尝试实现一个使用该按钮的导航抽屉。有没有办法将导航抽屉绑定到它？ 我需要在 appBar 中重新创建这个小部件吗？

我不确定完成此任务的最佳方法是什么，我希望能得到一些关于如何进行的建议！

谢谢！

【参考方案1】：

使用 GlobalKey 并通过调用 myKey.currentState.openDrawer() 来显示抽屉 在演示中，单击按钮时我也会打开抽屉

完整代码

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      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: ListenToDrawerEvent(),
    );
  



class ListenToDrawerEvent extends StatefulWidget 
  @override
  ListenToDrawerEventState createState() 
    return new ListenToDrawerEventState();
  


class ListenToDrawerEventState extends State<ListenToDrawerEvent> 
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  static final List<String> _listViewData = [
    "Inducesmile.com",
    "Flutter Dev",
    "android Dev",
    "ios Dev!",
    "React Native Dev!",
    "React Dev!",
    "express Dev!",
    "Laravel Dev!",
    "Angular Dev!",
  ];

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("Listen to Drawer Open / Close Example"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () 
            _scaffoldKey.currentState.openDrawer();
          ,
        ),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.all(10.0),
          children: _listViewData
              .map((data) => ListTile(
            title: Text(data),
          ))
              .toList(),
        ),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: Text('Main Body'),
          ),
          RaisedButton(
            padding: const EdgeInsets.all(8.0),
            textColor: Colors.white,
            color: Colors.blue,
            onPressed: () _scaffoldKey.currentState.openDrawer();,
            child: new Text("open drawer"),
          )
        ],
      ),
    );
  

【讨论】：

非常感谢！这就像一个魅力！我也很欣赏你的回答是多么详细:)

【参考方案2】：

 AppBar(
   leading: Builder(
     builder: (BuildContext context) 
       return IconButton(
         icon: const Icon(Icons.menu),
         onPressed: ()  Scaffold.of(context).openDrawer(); ,
         tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
       );
     ,
   ),
)

另见：

https://api.flutter.dev/flutter/material/AppBar/leading.html https://www.youtube.com/watch?v=EcAwFpC9S8s

【参考方案3】：

   if (_scaffoldKey.currentState.isDrawerOpen)
            _scaffoldKey.currentState.openEndDrawer();
          else 
            _scaffoldKey.currentState.openDrawer();
          
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

您可以根据抽屉的哪一侧进行操作！！！！