简体   繁体   English

Flutter 2.0 appbar后退按钮如果包含endDrawer消失

[英]Flutter 2.0 appbar back button disappeared if contains endDrawer

I just updated flutter to 2.0, and I realized all the back buttons disappeared if the appbar also conatains an endDrawer我刚刚将 flutter 更新到 2.0,我意识到如果 appbar 还包含 endDrawer,所有后退按钮都会消失

Appbar with endDrawer带有 endDrawer 的应用栏

I tried to get rid of the endDrawer, the back button shows up, just not together with the endDrawer, it wasn't like that before the update, anybody knows how to solve this?我试图摆脱endDrawer,返回按钮出现,只是没有与endDrawer一起,更新前不是这样,有人知道如何解决这个问题吗?

Appbar without endDrawer没有 endDrawer 的 Appbar

my code:我的代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
            child: TextButton(
          child: Text(
            'Page 1',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Page2()));
          },
        )),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        child: Center(
          child: TextButton(
          child: Text(
            'Page 2',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        ),
      ),
      endDrawer: Drawer(),
    );
  }
}

Just add this to your AppBar/SliverAppBar只需将此添加到您的 AppBar/SliverAppBar

      leading: (ModalRoute.of(context)?.canPop ?? false) ? BackButton() : null,

This is current behavior in version 2.0, if condition also check !hasEndDrawer这是 2.0 版中的当前行为, if条件还检查!hasEndDrawer
version 1.17 1.17 版

if (canPop)
          leading = useCloseButton ? const CloseButton() : const BackButton();

https://github.com/flutter/flutter/blob/aee9e94c21009bfc6c08f442eacde06f001c25f9/packages/flutter/lib/src/material/app_bar.dart#L510 https://github.com/flutter/flutter/blob/aee9e94c21009bfc6c08f442eacde06f001c25f9/packages/flutter/lib/src/material/app_bar.dart#L510

version 2.0 2.0版

if (!hasEndDrawer && canPop)
      leading = useCloseButton ? const CloseButton() : const BackButton();

https://github.com/flutter/flutter/blob/ca2bef6ee915d943b5a160055b5065ec3391f19a/packages/flutter/lib/src/material/app_bar.dart#L793 https://github.com/flutter/flutter/blob/ca2bef6ee915d943b5a160055b5065ec3391f19a/packages/flutter/lib/src/material/app_bar.dart#L793

You can add your own logic in leading您可以在leading中添加自己的逻辑
code snippet代码片段

appBar: AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            final ScaffoldState scaffold = Scaffold.maybeOf(context);
            final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
            final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
            final bool canPop = parentRoute?.canPop ?? false;

            if (hasEndDrawer && canPop) {
              return BackButton();
            } else {
              return SizedBox.shrink();
            }
          },
        ),
        title: Text('Page 2'),
      ),

working demo工作演示

在此处输入图像描述

full code完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
            child: TextButton(
          child: Text(
            'Page 1',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Page2()));
          },
        )),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            final ScaffoldState scaffold = Scaffold.maybeOf(context);
            final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
            final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
            final bool canPop = parentRoute?.canPop ?? false;

            if (hasEndDrawer && canPop) {
              return BackButton();
            } else {
              return SizedBox.shrink();
            }
          },
        ),
        title: Text('Page 2'),
      ),
      body: Container(
        child: Center(
          child: TextButton(
            child: Text(
              'Page 2',
              style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
      ),
      endDrawer: Drawer(),
    );
  }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM