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),
            ),
          ),
        ),
      ),
    );
  }
}



相关文章
|
8月前
|
存储 前端开发 文件存储
Flutter笔记:关于应用程序中提交图片作为头像
1. 头像选择与提交的一般步骤Flutter笔记关于应用程序中提交图片作为头像作者目 录1. 头像选择与提交的一般步骤2. 选择本地文件到头像的示例代码3. 将图像提交到后端1. 头像选择与提交的一般步骤image将处理后的图像作为用户的头像显示在应用程序中。您可以使用Image或小部件来加载和显示图像。这些步骤涵盖了从选择图像到上传、处理和显示图像的基本流程。请根据您的具体需求和后端实现来自定义这些步骤。此外,确保您的应用程序有适当的权限以访问设备上的相册或相机,这通常需要在和。
187 0
|
Dart
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
函数(Function)也被称为方法(Method)。其最直观的理解就是数据中的函数,比如y=f(x),在编程中,f对输入x进行处理,返回结果y,就是一个函数......
775 0
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
|
4月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
60 0
|
7月前
|
Dart API
Flutter笔记:发布一个Flutter头像模块 easy_avatar
A plug-in that provides solutions to avatar-related problems in Flutter applications. 在 Flutter 应用程序中提供头像相关问题的解决方案的插件。
66 0
|
11月前
|
UED 索引
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航
|
Java Android开发 网络架构
Flutter(二十四)——参数回传
Flutter(二十四)——参数回传
104 2
Flutter(二十四)——参数回传
如何用一行代码实现Flutter页面变灰效果?
如何用一行代码实现Flutter页面变灰效果?
如何用一行代码实现Flutter页面变灰效果?
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷,通过路由管理可以降低页面耦合,提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
1167 1
Flutter App页面路由及路由拦截实现
|
JSON 数据格式 容器
Flutter 仿微信价值几个亿的页面
网传微信支付页面的第三方链接一个格子需要广告费1一个亿,微信支付页非常适合做功能导航,本篇使用 ListView和 GridView 模仿微信支付页面
222 0
Flutter 仿微信价值几个亿的页面