如何在颤动中更改抽屉图标？

Posted 2023-04-13

【中文标题】如何在颤动中更改抽屉图标？

【英文标题】：How can I change Drawer icon in flutter?

【发布时间】：2020-04-20 14:06:23

【问题描述】：

抽屉有这个默认的三个水平条作为默认图标，但我想将其更改为其他东西。 我已经检查了Drawer() 下的可能选项，但似乎没有附加任何属性。

【参考方案1】：

这应该可行。

Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title:Text('hi'),
        leading: IconButton(
          icon: Icon(Icons.accessible),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
      ),
);

来自文档 ->

Widget 前导 类型：Widget 在 [title] 之前显示的小部件。 如果这是 null 并且 [automaticallyImplyLeading] 设置为 true，则 [AppBar] 将暗示一个适当的小部件。例如，如果 [AppBar] 位于还具有 [Drawer] 的 [Scaffold] 中，则 [Scaffold] 将使用打开抽屉的 [IconButton] 填充此小部件（使用 [Icons.menu]）。如果没有 [Drawer] 并且父 [Navigator] 可以返回，则 [AppBar] 将使用调用 [Navigator.maybePop] 的 [BackButton]。 以下代码展示了如何手动指定抽屉按钮而不是依赖 [automaticallyImplyLeading]：

import 'package:flutter/material.dart';
Widget build(context) 
  return AppBar(
    leading: Builder(
      builder: (BuildContext context) 
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () 
            Scaffold.of(context).openDrawer();
          ,
          tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
        );
      ,
    ),
  );

此示例中使用 [Builder] 以确保上下文引用子树的该部分。这样，这个代码 sn-p 甚至可以在创建 [Scaffold] 的代码中使用（在这种情况下，如果没有 [Builder]，上下文将无法看到 [Scaffold]，因为它会引用该小部件的祖先）。

【讨论】：

在我的情况下，我得到“处理手势时抛出了以下断言：使用不包含脚手架的上下文调用 Scaffold.of()。找不到脚手架祖先从传递给 Scaffold.of() 的上下文。这通常发生在提供的上下文来自与其构建函数实际创建正在寻找的 Scaffold 小部件相同的 StatefulWidget 时。"

参考答案第二部分@vinodyadav

【参考方案2】：

appBar: AppBar(
        leading: Builder(
          builder: (context) => IconButton(
            icon: Icon(Icons.menu_rounded),
            onPressed: () => Scaffold.of(context).openDrawer(),
          ),
        ),
        title: Text(
          "Track your Shipment",
        ),
      ),

【参考方案3】：

您也可以使用这样的自定义按钮打开抽屉。 创建这个脚手架键。

var scaffoldKey = GlobalKey<ScaffoldState>();

现在像这样在你的状态类中添加一个脚手架

      @override
  Widget build(BuildContext context) 
    return Scaffold(
      key: scaffoldKey,
      drawer: Drawer(
        child: Text('create drawer widget tree here'),
      ),
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          'appName',
          style: Theme.of(context).textTheme.headline2,
        ),
        leading: IconButton(
          onPressed: () 
            scaffoldKey.currentState?.openDrawer();
          ,
          icon: Image.asset(
            'assets/images/menu.png',
            fit: BoxFit.cover,
          ),
        ),
      ),
      body: Container(),
    );
  

【参考方案4】：

假设您有：index.dart（您要在其中使用应用栏）、drawer.dart（您的抽屉或导航菜单）和 appbar.dart（您的应用栏）

你可以在抽屉里这样做：

Widget drawer(BuildContext context) 
    return Drawer(
child: ListView(
  padding: EdgeInsets.zero,
  children: <Widget>[
    Container(
        ...
    )
);

然后你的 appbar.dart：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget 
  @override
  Widget build(BuildContext context) 
    return AppBar(
      backgroundColor: Colors.white,
      leading: InkWell(
        onTap: () => Scaffold.of(context).openDrawer(),
        child: Image.asset("assets/images/imgAppBar.png"),
      ),
     title: Container(...

然后你的 index.dart：

@override
Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      drawer: drawer(context),
      appBar: CustomAppBar(),
    ...

这只是一个简单的。如果您想使用图标等，可以使用 IconButton。

【参考方案5】：

实际上，我尝试了 cmd_prompter 的答案，但它对我不起作用。

描述了更好的方法here

我的工作代码在这里：

return DefaultTabController(
      key: Key("homePage"),
      length: 2,
      child: Scaffold(
          endDrawer: Drawer(

        ),
          appBar: AppBar(
            leading: BackButton(
                onPressed: () 
                  ,
              ),
            title: Text(profile.selectedCity!),
            actions: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: baseUnit(3)),
                child: Builder(
                  builder: (context) => IconButton(
                      icon: Icon(Icons.account_circle),
                      onPressed: () => Scaffold.of(context).openEndDrawer(),
                    )
                )
              )

它对我来说很好——尤其是关于使用 Builder 的部分。这很重要 - 否则它对我不起作用。

【参考方案6】：

class HomeOne extends StatefulWidget  const HomeOne(Key? key) : super(key: key);

@override State createState() =>HomeOneState(); 

var scaffoldKey = GlobalKey();

class HomeOneState extends State  @override Widget build(BuildContext context)  var theme = Theme.of(context); return Directionality( textDirection: TextDirection.rtl, child: Scaffold( key: scaffoldKey, drawerEnableOpenDragGesture: true, // drawerScrimColor: Colors.red, appBar: AppBar( leading: IconButton( onPressed: () => scaffoldKey.currentState?.openDrawer(), icon: const Icon( Icons.add, color: Colors.red, )), ),

【讨论】：

不接受纯代码答案。请改进。阅读***.com/help/how-to-answer 获取信息。

【参考方案7】：

AppBar(
        leading: IconButton(
          onPressed: () 
            // Code
          ,
          icon: Icon(Icons.arrow_back),
        ),
      ),

【参考方案8】：

要只更改图标颜色，adding an iconTheme to the AppBar 更容易做到：

@override
Widget build(BuildContext context) 
  return Scaffold(
    drawer: Drawer(),
    appBar: AppBar(
      title: Text("Navigation Drawer"),
      iconTheme: IconThemeData(color: Colors.green),
    ),
  );

【参考方案9】：

您需要创建 ScaffoldKey 类型的全局键，用于打开抽屉并更改图标：

    Widget build(BuildContext context) 
    var scaffoldKey = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title:Text('hi'),
        leading: IconButton(
          icon: Icon(Icons.accessible),
          onPressed: () => scafoldKey.currentState.openDrawer(),
        ),
      ),
    );