Flutter开发登录应用时无法添加appBar实现页面返回功能如何解决

方案1：通过Scaffold的appBar属性实现（官方推荐） #

你当前编写的Body是页面的内容组件，返回按钮需要配置在上层包裹Body的页面（比如LoginScreen、SignUpScreen）的Scaffold组件的appBar参数中，示例代码如下：

class LoginScreen extends StatelessWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 新增appBar配置
      appBar: AppBar(
        backgroundColor: Colors.transparent, // 可根据你的设计风格调整背景色
        elevation: 0, // 去掉AppBar默认阴影，适配自定义界面
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(), // 点击返回上一级页面
        ),
      ),
      body: const Body(), // 引用你原有的Body组件
    );
  }
}

如果是跳转后的SignUpScreen需要返回功能，在SignUpScreen的Scaffold中添加相同的appBar配置即可。

方案2：直接在Body内容中嵌入返回按钮 #

如果你不想使用系统自带的AppBar，要把返回按钮集成到你现有的内容布局中，直接修改你的Body组件代码，在Column最顶部添加返回按钮即可：

class Body extends StatelessWidget {
  const Body({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 新增顶部返回按钮
            Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: const EdgeInsets.only(left: 16, top: 32),
                child: IconButton(
                  icon: const Icon(Icons.arrow_back, color: Colors.black),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ),
            ),
            Text(
              "LOGIN",
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: size.height * 0.03),
            RoundedInputField(
              hintText: "Your Email",
              onChanged: (value) {},
            ),
            RoundedPasswordField(
              onChanged: (value) {},
            ),
            RoundedButton(
              text: "LOGIN",
              press: () {},
            ),
            SizedBox(height: size.height * 0.03),
            AlreadyHaveAnAccountCheck(
              press: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return const SignUpScreen();
                    },
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

注意事项 #

• 确保当前页面是通过Navigator.push方法跳转进入的，路由栈中存在上一级页面记录，pop方法才能正常触发返回
• 如果当前页面是应用的初始首页，路由栈中没有上一级页面，无需添加返回按钮

内容的提问来源于stack exchange，提问作者Ahmed Al-Khateeb