Flutter(二十四)——参数回传

简介: Flutter(二十四)——参数回传

前言


上一篇通过静态路由以及动态路由了解了,在Flutter开发中界面的跳转,但在实际的项目中,并不仅仅只有跳转这么一种需求,还有回传参数。(下图为本文实现最终效果图)

比如在某些悬浮窗口中选择城市,然后返回地址等等,都具有回传参数的需求,那么在Flutter开发中,要怎么实现这么一种需求呢?不妨我们来做一个城市参数回传的例子。


主页面


首先,就是我们App的主页面设计,肯定有跳转到选择城市界面的功能,所以代码应该是这个样子的:

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("主页面"),
      ),
      body: Center(
        child: JumpButton()
      ),
    );
  }
}
class JumpButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        _showCityResult(context);
      },
      child: Text("选择城市:",style: TextStyle(fontSize: 33,color: Colors.red),),
    );
  }
  /***
   * 跳转页面并返回数据显示
   */
  _showCityResult(BuildContext context) async{
    final result=await Navigator.push(context, MaterialPageRoute(builder: (context)=>CityPage()));//跳转界面获取返回数据
    Scaffold.of(context)..removeCurrentSnackBar()..showSnackBar(SnackBar(content: Text("$result"),));//显示返回数据
  }
}


需要说明一点的是,返回数据需要等待界面操作完成之后,也属于异步的操作,所以需要用到async以及await ,代码很简单,主界面就是一个按钮,然后点击按钮,跳转界面,返回数据,并显示在SnackBar上,SnackBar控件在Java开发Android程序中也有,就不多做讲解了。


跳转界面


接着,就需要实现我们的跳转界面,我们先来看看其代码:

class CityPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("选择城市"),),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10),
            child: RaisedButton(
              child: Text("武汉加油"),
              onPressed: (){
                Navigator.pop(context,"武汉加油");
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10),
            child: RaisedButton(
              child: Text("湖北加油"),
              onPressed: (){
                Navigator.pop(context,"湖北加油");
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10),
            child: RaisedButton(
              child: Text("中国加油"),
              onPressed: (){
                Navigator.pop(context,"中国加油");
              },
            ),
          ),
        ],
      ),
    );
  }
}


这个界面给了三个选项,分别是武汉加油,湖北加油,中国加油,然后通过点击按钮返回到上一个界面,传递参数通过Navigator.pop(context,“湖北加油”)的第二个参数传递,其他的代码基本前面都用过,这里就不在赘述了,实现的效果与该博文开始的图片一摸一样。

相关文章
|
Dart
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
函数(Function)也被称为方法(Method)。其最直观的理解就是数据中的函数,比如y=f(x),在编程中,f对输入x进行处理,返回结果y,就是一个函数......
1061 0
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
|
5月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
48 0
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
521 0
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
Flutter页面参数的传递(获取&返回),比如修改昵称头像,并在上一级页面返回显示
Flutter页面参数的传递(获取&返回),比如修改昵称头像,并在上一级页面返回显示
399 0
|
Dart
【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )(一)
【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )(一)
391 0
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
26天前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
56 8
|
26天前
|
存储 JavaScript 前端开发
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战。本文介绍了几种常用的状态管理框架,如Provider和Redux,分析了它们的基本原理、优缺点及适用场景,并提供了选择框架的建议和使用实例,旨在帮助开发者提高开发效率和应用性能。
34 4
|
26天前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
39 2
|
2月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
103 3