如何将抽屉小部件放置在右侧

Question

如何将抽屉小部件放在右侧。同时，是否可以在单个页面上的应用栏两侧放置两个抽屉小部件。

Widget build(BuildContext context){
 return Scaffold(
  drawer: Drawer(
    child: ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.shopping_cart),
          title: Text('Checkout'),
          onTap: (){
            Navigator.pushNamed(context, '/home');
          },
        ),
        ListTile(
          leading: Icon(Icons.report),
          title: Text('Transactions'),
          onTap: (){
            Navigator.pushNamed(context, '/transactionsList');
          },
        ),
      ]
    )
  ),
  body: SingleChildScrollView(
    child: Column(
      children : [
        _buildOrderHeader(),
        _buildOrderDetails(context),
      ]
    )
  )
);

}'

- KURRU HEM

---

在 Scaffold 中使用 endDrawer。 - Raouf Rahiche

感谢您的支持。它起作用了。 是否可以更改抽屉图标？ - KURRU HEM

在 appBar 中使用 leading 属性 - Raouf Rahiche

我需要更改endDrawer的图标。此外，我无法打开endDrawer。 - KURRU HEM

Answer 1

通过使用endDrawer: ...来设置一个抽屉，而不是或者除了drawer: ...，就像这样：

Scaffold(
  endDrawer: Drawer(...),
  // ...
)

要以编程方式打开它，请使用

Scaffold.of(context).openEndDrawer(); //This might have been updated by flutter team since the last edit

另请参阅https://api.flutter.dev/flutter/material/Scaffold/endDrawer.html。

- Günter Zöchbauer

---

谢谢你的回答。我需要在点击应用栏操作按钮时打开endDrawer。 - KURRU HEM

Scaffold.of(context).openEndDrawer() https://docs.flutter.io/flutter/material/ScaffoldState/openEndDrawer.htmlScaffold.of(context).openEndDrawer() https://docs.flutter.io/flutter/material/ScaffoldState/openEndDrawer.html - Günter Zöchbauer

@GünterZöchbauer 最终成功超越了我在Flutter中的英雄，排名第二。[https://stackoverflow.com/tags/flutter/topusers] - CopsOnRoad

Flutter中的抽屉窗口小部件，默认从左到右打开，而endDrawer默认从右到左打开。 - Si 12

Answer 2

使用Dart Null Safety从右侧打开导航抽屉，您应该使用endDrawer()。在flutter中有两个抽屉参数可用。

1. 抽屉（左侧）
2. endDrawer（右侧） 您可以查看endDrawer的示例。

单击按钮以打开endDrawer。

_scaffoldKey.currentState!.openEndDrawer();

创建全局键

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

在 Build() 函数内部

Scaffold(
  backgroundColor: backgroundcolor_cust,
  key: _scaffoldKey,
  endDrawer: Drawer(
    elevation: 16.0,
    child: leftDrawerMenu(context, user_phone, cart_count),
  ),
)

- Kamal Bunkar

Answer 3

endDrawer: Drawer(
  child: Center(
    child: Column(
      children: const [
        Text('End Drawer'),
      ],
    ),
  ),
),

- Osama Sandhu

Answer 4

如果您想让按钮在右侧，抽屉在左侧，则可以将汉堡包按钮放置在容器内，这样汉堡包按钮就会在右侧，导航抽屉仍然在左侧。（不建议使用）

new Container(
  alignment: Alignment.topRight,
  margin: EdgeInsets.only(top: 20.0, right: 10.0),
  child: IconButton(
    icon: Icon(
      Icons.menu,
      size: 24,
      color: Colors.white,
    ),
    onPressed: () => scaffoldKey.currentState.openDrawer(),
  ),
)

- ABHIMANGAL MS