Question

在支架如果使用“动作”参数它隐藏了“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

我遇到了同样的问题。我仅使用棘手的解决方案来解决此问题，请执行以下操作：

`类_MainPageState扩展了状态{

final _scaffoldKey = GlobalKey（）; `

在此添加（最后_scaffoldKey）。在班级内部。

return Scaffold( key: _scaffoldKey, 在脚手架内部，将变量分配给键：。
将第一个图标按钮添加为icon.menu，当按下图标时，将显示端部抽屉，如下所示：

IconButton（图标：新图标（Icons.menu，颜色：Colors.white）， onPressed：（）{ _scaffoldKey.currentState.openEndDrawer（）; }，），

Answer 2

扩展脚手架类

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代替脚手架。

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

我找到了一种更简单的方法。为标题创建行，并添加文本，间隔符和图标。在我的情况下，我想要标题位于左侧，而图标则位于最终抽屉旁边。

  @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());
  }

扑脚手架，操作和结束抽屉在一起吗？

4 个答案: