Flutter Scaffold、Actions 和 End Drawer？

Question

在 Scaffold 中，如果使用 'actions' 参数，它会隐藏 'endDrawer'。可以同时显示吗？

var tmp = new Scaffold(
  /// end drawer
    endDrawer: Container(color: Colors.red,
        child: Text('END DRAWER')),
    appBar: new AppBar(
        title: Text('Title'),
    actions: <Widget>[

      /// Cancel, Save
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: IconButton(
          icon: Icon(Icons.clear,size: 24.0,),
          onPressed: () => Navigator.pop(context), //cancelButton,
        ),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: IconButton(
          icon: Icon(Icons.check_circle,size: 30.0,),
          onPressed: () => Navigator.pop(context),
        ),)
    ],
),
    body: new Container(color: Colors.amber,);

Answer 1

我遇到了同样的问题。我只使用了一个棘手的解决方案来解决这个问题：

1.

class _MainPageState extends State<MainPage> {
  
  final _scaffoldKey = GlobalKey<ScaffoldState>(); `

here we add (final _scaffoldKey). inside the class.

2.

return Scaffold(
  key: _scaffoldKey

在脚手架内部将变量分配给键

3.将第一个图标按钮添加为icon.menu，当按下图标时会显示如下所示的结束抽屉：

IconButton(
          icon: new Icon(Icons.menu,color: Colors.white),
          onPressed: () {
            _scaffoldKey.currentState.openEndDrawer();
          },
        ),

与

  class _MainPageState extends State<MainPage> {
  
    final _scaffoldKey = GlobalKey<ScaffoldState>();

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          actions: [
            return IconButton(
              icon: new Icon(Icons.menu, color: Colors.white),
            onPressed: () {
              _scaffoldKey.currentState.openEndDrawer();
            });
          ]
        ),
      );
    }

Answer 2

扩展 Scaffold 类

class CustomScaffoldWidget extends Scaffold {
  CustomScaffoldWidget({
    AppBar appBar,
    Widget body,
    GlobalKey<ScaffoldState> key,
    Widget endDrawer,
    Widget drawer,
    FloatingActionButton floatingActionButton,
    FloatingActionButtonLocation floatingActionButtonLocation,
    FloatingActionButtonAnimator floatingActionButtonAnimator,
    List<Widget> persistentFooterButtons,
    Color backgroundColor,
    Widget bottomSheet,
    Widget bottomNavigationBar,
    bool resizeToAvoidBottomPadding = true,
    bool primary = true,
  })  : assert(key != null),
        super(
          key: key,
          appBar: endDrawer != null &&
                  appBar.actions != null &&
                  appBar.actions.isNotEmpty
              ? _buildEndDrawerButton(appBar, key)
              : appBar,
          body: body,
          floatingActionButton: floatingActionButton,
          floatingActionButtonLocation: floatingActionButtonLocation,
          floatingActionButtonAnimator: floatingActionButtonAnimator,
          persistentFooterButtons: persistentFooterButtons,
          drawer: drawer,
          endDrawer: endDrawer,
          bottomNavigationBar: bottomNavigationBar,
          bottomSheet: bottomSheet,
          backgroundColor: backgroundColor,
          resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
          primary: primary,
        );

  static AppBar _buildEndDrawerButton(
      AppBar myAppBar, GlobalKey<ScaffoldState> _keyScaffold) {
    myAppBar.actions.add(IconButton(
        icon: Icon(Icons.menu),
        onPressed: () => !_keyScaffold.currentState.isEndDrawerOpen
            ? _keyScaffold.currentState.openEndDrawer()
            : null));
    return myAppBar;
  }
}

用扩展的脚手架替换您当前的脚手架。全局键将确保您不会在其他页面上收到重复键异常错误。但是，如果您不提供密钥，构造函数中的断言会通知您。

class HomeView extends StatelessWidget {
GlobalKey<ScaffoldState> _key = GlobalKey();
Widget build(BuildContext context){
return CustomScaffoldWidget(
key:_key,
endDrawer:Drawer(),
appBar: AppBar(actions:[Icon(Icons.search),]),
body: Center(child: Text('custom Scaffold'))
);
}

}

Answer 3

我建议通过复制粘贴以下代码并使用 MyCustomScaffold 而不是 Scaffold 来创建自定义 Scaffold。

class MyCustomScaffold extends Scaffold {
  static GlobalKey<ScaffoldState> _keyScaffold = GlobalKey();
  MyCustomScaffold({
    AppBar appBar,
    Widget body,
    Widget floatingActionButton,
    FloatingActionButtonLocation floatingActionButtonLocation,
    FloatingActionButtonAnimator floatingActionButtonAnimator,
    List<Widget> persistentFooterButtons,
    Widget drawer,
    Widget endDrawer,
    Widget bottomNavigationBar,
    Widget bottomSheet,
    Color backgroundColor,
    bool resizeToAvoidBottomPadding = true,
    bool primary = true,
  }) : super(
          key: _keyScaffold,
          appBar: endDrawer != null &&
                  appBar.actions != null &&
                  appBar.actions.isNotEmpty
              ? _buildEndDrawerButton(appBar)
              : appBar,
          body: body,
          floatingActionButton: floatingActionButton,
          floatingActionButtonLocation: floatingActionButtonLocation,
          floatingActionButtonAnimator: floatingActionButtonAnimator,
          persistentFooterButtons: persistentFooterButtons,
          drawer: drawer,
          endDrawer: endDrawer,
          bottomNavigationBar: bottomNavigationBar,
          bottomSheet: bottomSheet,
          backgroundColor: backgroundColor,
          resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
          primary: primary,
        );

  static AppBar _buildEndDrawerButton(AppBar myAppBar) {
    myAppBar.actions.add(IconButton(
        icon: Icon(Icons.menu),
        onPressed: () => !_keyScaffold.currentState.isEndDrawerOpen
            ? _keyScaffold.currentState.openEndDrawer()
            : null));
    return myAppBar;
  }
}

Answer 4

我找到了一个更简单的方法。对于标题，创建一个 Row 并添加一个 Text、spacer 和 Icons。就我而言，我想要左侧的标题和右侧的图标在末端抽屉旁边。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        endDrawer: Drawer(
            child: ListView.builder(
                itemCount: 2,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    leading: Icon(Icons.list),
                    title: Text("GFG item $index"),
                    trailing: Icon(Icons.done),
                  );
                })),
        appBar: AppBar(
            title: Row(
          children: [
            Text(
              "App title",
              style: TextStyle(color: Colors.white),
            ),
            Spacer(),
            IconButton(
              icon: Icon(Icons.shopping_cart),
              onPressed: () {},
              color: Colors.white,
            )
          ],
        )),
        body: _showBody());
  }