Flutter页面参数的传递(获取&返回),比如修改昵称头像,并在上一级页面返回显示

简介: Flutter页面参数的传递(获取&返回),比如修改昵称头像,并在上一级页面返回显示

在项目中经常需要返回特定数据,或者传递参数给上一页

返回1

onPressed: () {
            Map infos = {};
            infos["nickname"] = nicknamelast;
            infos["avatar"] = avatar;
            Navigator.of(context).pop(infos);
          }
复制代码

返回2

Flutter中可以通过WillPopScope来实现返回按钮拦截

onWillPop是一个WillPopScope的回调函数,当用户点击返回按钮时被调用

WillPopScope必须包含child,否则会报错

WillPopScope(
child:...,
onWillPop: () {
        Map infos = {};
        infos["nickname"] = nicknamelast;
        infos["avatar"] = avatar;
        Navigator.of(context).pop(infos);
      },
复制代码

源码:

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// @dart = 2.8
import 'framework.dart';
import 'navigator.dart';
import 'routes.dart';
///为用户否决尝试注册一个回调,以取消封闭
///[ModalRoute]。
///
///也可以看看:
///
///*[ModalRoute.addScopedWillPopCallback]和[ModalRoute.removeScopedWillPopCallback],
///此小部件用来注册和注销[onWillPop]的代码。 
class WillPopScope extends StatefulWidget {
  ///创建一个小部件,该小部件注册用户对否决尝试的回调
  ///关闭封闭的[ModalRoute]。
  ///
  ///[child]参数不能为null。 
  const WillPopScope({
    Key key,
    @required this.child,
    @required this.onWillPop,
  })  : assert(child != null),
        super(key: key);
  /// The widget below this widget in the tree.
  ///
  /// {@macro flutter.widgets.child}
  final Widget child;
  ///由用户调用否决尝试以消除封闭的[ModalRoute]。
   ///
   ///如果回调返回的Future解析为false,则包含
   ///不会弹出路线。
  final WillPopCallback onWillPop;
  @override
  _WillPopScopeState createState() => _WillPopScopeState();
}
class _WillPopScopeState extends State<WillPopScope> {
  ModalRoute<dynamic> _route;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (widget.onWillPop != null)
      _route?.removeScopedWillPopCallback(widget.onWillPop);
    _route = ModalRoute.of(context);
    if (widget.onWillPop != null)
      _route?.addScopedWillPopCallback(widget.onWillPop);
  }
  @override
  void didUpdateWidget(WillPopScope oldWidget) {
    super.didUpdateWidget(oldWidget);
    assert(_route == ModalRoute.of(context));
    if (widget.onWillPop != oldWidget.onWillPop && _route != null) {
      if (oldWidget.onWillPop != null)
        _route.removeScopedWillPopCallback(oldWidget.onWillPop);
      if (widget.onWillPop != null)
        _route.addScopedWillPopCallback(widget.onWillPop);
    }
  }
  @override
  void dispose() {
    if (widget.onWillPop != null)
      _route?.removeScopedWillPopCallback(widget.onWillPop);
    super.dispose();
  }
  @override
  Widget build(BuildContext context) => widget.child;
}
复制代码

接受

onPressed: () {
                        Navigator.pushNamed(context, route.OpenPersonInfoPage)
                            .then((value) {
                          setState(() {
                            print(value.toString());
                            Map agrs = value;
                            Config.UInfo.nickname = agrs["nickname"];
                            Config.UInfo.avatar = agrs["avatar"];
                          });
复制代码

这样的话,就可以在按返回按钮的时候返回数据,

在这儿还可以向大家介绍如何双击退出程序

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WillPopTest();
  }
}
class WillPopTest extends State {
  DateTime _lastTime;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          centerTitle: true,
          title: Text(
            '实现二次点击退出',
            style: TextStyle(fontSize: 18, color: Colors.white),
          ),
        ),
        body: WillPopScope(
          onWillPop: ()async{
            if(_lastTime==null||DateTime.now().difference(_lastTime)>Duration(seconds: 1)){
              _lastTime=DateTime.now();
              Fluttertoast.showToast(msg: "再点击一次退出app",
                fontSize: 16,
                backgroundColor: Colors.blue,
                textColor: Colors.white
              );
              return false;
            }
            return true;
          },
          child: Container(
            alignment: Alignment.center,
            child: Text(
              "1秒内连续按两次返回键退出",
              style: TextStyle(fontSize: 30),
            ),
          ),
        ),
      ),
    );
  }
}



相关文章
|
存储 前端开发 文件存储
Flutter笔记:关于应用程序中提交图片作为头像
1. 头像选择与提交的一般步骤Flutter笔记关于应用程序中提交图片作为头像作者目 录1. 头像选择与提交的一般步骤2. 选择本地文件到头像的示例代码3. 将图像提交到后端1. 头像选择与提交的一般步骤image将处理后的图像作为用户的头像显示在应用程序中。您可以使用Image或小部件来加载和显示图像。这些步骤涵盖了从选择图像到上传、处理和显示图像的基本流程。请根据您的具体需求和后端实现来自定义这些步骤。此外,确保您的应用程序有适当的权限以访问设备上的相册或相机,这通常需要在和。
292 0
|
Dart
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
函数(Function)也被称为方法(Method)。其最直观的理解就是数据中的函数,比如y=f(x),在编程中,f对输入x进行处理,返回结果y,就是一个函数......
1034 0
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
|
1月前
|
Dart 开发者
flutter:页面整合 (十)
本文档介绍了如何在 Flutter 应用中使用底部导航栏(`BottomNavigationBar`)和侧边栏(`Drawer`),包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏,并通过 `TabController` 控制器实现页面切换。同时,文档还提供了如何自定义导航栏样式和添加浮动操作按钮(`FloatingActionButton`)的方法。最后,整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码,帮助开发者快速构建具有导航功能的 Flutter 应用界面。
|
4月前
|
缓存 容器
Flutter实现仿微信群头像功能
Flutter实现仿微信群头像功能
68 0
|
4月前
Flutter-实现头像叠加动画效果
Flutter-实现头像叠加动画效果
66 0
|
4月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
42 0
|
6月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
331 0
|
Dart API
Flutter笔记:发布一个Flutter头像模块 easy_avatar
A plug-in that provides solutions to avatar-related problems in Flutter applications. 在 Flutter 应用程序中提供头像相关问题的解决方案的插件。
128 0
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航