我正在尝试按图标打开一个抽屉，该抽屉位于我在 flutter 应用程序中创建的粘性标题内

Question

所以我创建了一个从一页到另一页的粘性标题，我真的很喜欢这个设计。

我正在尝试让左侧的汉堡图标打开一个抽屉。下面是我的班级小部件。我努力了： onpress: () {Scaffold.of(context).openDrawer();},

我尝试过将Container变成脚手架，当我把它做成脚手架时，我无法保持它的外观，并且我尝试过制作GlobalKey。但我发现的每个地方都说它需要成为全局密钥才能发挥作用的支架。无论如何，我可以在这个容器内制作一个脚手架，因为我试图将容器放入脚手架中，但这也不起作用。

我的 main.dart 也会导入其所在的文件，然后调用 MyApp 类中的类。感谢您的帮助。

class HeaderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      color: headerBackGroundColor,
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          // Menu icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.menu,
              color: headerMenuIconColor,
              semanticLabel: 'Main menu for navigating app.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Menu icon button was pressed')));
            },
            tooltip: "Select an option from the menu.",
          ),
          // Search icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.search,
              color: headerSearchIconColor,
              semanticLabel: 'Search the app.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Search icon button was pressed')));
            },
            tooltip: "Enter a search term.",
          ),
          // Share icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.share,
              color: headerShareIconColor,
              semanticLabel: 'Share this page from the app.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Share icon button was pressed')));
            },
            tooltip: "Share this content.",
          ),
          // Weather icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.cloud,
              color: headerWeatherIconColor,
              semanticLabel:
                  'Weather widget with temperature and sky conditions.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Weather icon button was pressed')));
            },
            tooltip: "Set weather options.",
          ),
        ],
      ),
    );
  }
}

Answer 1

尝试使用全局密钥

声明脚手架状态全局键：

final scaffoldKey = GlobalKey<ScaffoldState>();

将其分配给脚手架，还必须有抽屉组：

...

Scaffold(
  key: scaffoldKey,
  drawer: Drawer(),

...

像这样打开它：

scaffoldKey.currentState!.openDrawer();

---

有问题的 HeaderWidget 的完整示例

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.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Page(),
    );
  }
}

final scaffoldKey = GlobalKey<ScaffoldState>();

class Page extends StatelessWidget {
  const Page({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: const PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
        child: HeaderWidget(),
      ),
      drawer: const Drawer(child: Center(child: Text('Drawer'))),
      body: const Center(child: Text('Example Page')),
    );
  }
}

class HeaderWidget extends StatelessWidget {
  const HeaderWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      color: headerBackGroundColor,
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          // Menu icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.menu,
              color: headerMenuIconColor,
              semanticLabel: 'Main menu for navigating app.',
            ),
            onPressed: () {
              scaffoldKey.currentState!.openDrawer();
            },
            tooltip: "Select an option from the menu.",
          ),
          // Search icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.search,
              color: headerSearchIconColor,
              semanticLabel: 'Search the app.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                  content: Text('Search icon button was pressed')));
            },
            tooltip: "Enter a search term.",
          ),
          // Share icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.share,
              color: headerShareIconColor,
              semanticLabel: 'Share this page from the app.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                  content: Text('Share icon button was pressed')));
            },
            tooltip: "Share this content.",
          ),
          // Weather icon
          IconButton(
            iconSize: 24,
            icon: const Icon(
              Icons.cloud,
              color: headerWeatherIconColor,
              semanticLabel:
                  'Weather widget with temperature and sky conditions.',
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                  content: Text('Weather icon button was pressed')));
            },
            tooltip: "Set weather options.",
          ),
        ],
      ),
    );
  }
}