flutter / website

Flutter documentation web site
https://docs.flutter.dev
Other
2.75k stars 3.18k forks source link

Explain how to open a drawer in the 'Add a drawer to a screen' page #10514

Open sudot opened 2 months ago

sudot commented 2 months ago

Page URL

https://docs.flutter.dev/cookbook/design/drawer/

Page source

https://github.com/flutter/website/tree/main/src/content/cookbook/design/drawer.md

Describe the problem

没有打开 drawer 的相关说明和代码。

Expected fix

请添加打开 drawer 相关的代码和说明。

例如:

通过编程打开 drawer

打开 drawer 有两种常用的操作方式。

第一种方式,在 Builder 中子组件的点击事件中打开 drawer

Scaffold(
  appBar: AppBar(
    leading: Builder(
      builder: (context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      },
    ),
  ),
  drawer: Drawer(),
)

第二种方式,给定一个 GlobalKey<ScaffoldState>,然后你可以使用他来打开 drawer

final GlobalKey<ScaffoldState> scaffoldStateKey = GlobalKey<ScaffoldState>();
Scaffold(
  key: scaffoldStateKey,
  appBar: AppBar(
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () {
        scaffoldStateKey.currentState?.openDrawer();
      },
    ),
  ),
  drawer: Drawer(),
)

Additional context

No response

I would like to fix this problem.

atsansone commented 2 months ago

Rough translation

Describe the problem

There are no instructions or codes for opening the drawer.

Expected fix

Please add the code and instructions related to opening the drawer.

For example: Open drawer programmatically. There are two common operations for opening the drawer.

The first way is to open the drawer in the click event of the subcomponent in the Builder.

The second way, given a GlobalKey<ScaffoldState>, then you can use it to open the drawer.

atsansone commented 1 month ago

@zoeyfan : Could you check my translation of this contributor's request?

zoeyfan commented 1 month ago

LGTM!