Flutter鸿蒙版本灵活使用方法间的回调处理复杂化的逻辑

目录

写在前面

示例代码

main.dart:

one.dart:

代码解析

[1. 主入口 main 函数](#1. 主入口 main 函数)

[2. MyApp 类](#2. MyApp 类)

[3. CallbackExample 类](#3. CallbackExample 类)

[4. onok 函数](#4. onok 函数)

[5. one 函数](#5. one 函数)

写在后面


写在前面

在 Flutter 开发中,灵活使用函数之间的回调带来了多种好处,包括提高可重用性、简化异步编程、增强解耦设计以及提升用户体验。回调不仅使代码更易于理解和维护,还使得处理复杂逻辑变得简单且高效。因此,掌握回调函数的使用是 Flutter 开发者的重要技能。

示例代码

以下是我们将要讨论的完整代码:

main.dart:
Dart 复制代码
import 'package:flutter/material.dart';

import 'one.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Callback Example',
      home: CallbackExample(),
    );
  }
}

var age = "18";

class CallbackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Callback Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            onok();
          },
          child: Text('开始任务'),
        ),
      ),
    );
  }
}

onok() {
  one(123456789, "XIAOLI", (success) {
    if(success == true){
      print("age=$age");
    }else if(success == false){
      print("one函数回调false的逻辑");
    }
  });
}
one.dart:
Dart 复制代码
Future<void> one(int? ID, String? name,Function(bool) callback) async {
  Map<String,dynamic>List = {
    'ID':ID,
    'name':name
  };
  var num = List.length;
  if(num!=0){
    callback(true);
  }
}

代码解析

1. 主入口 main 函数
Dart 复制代码
void main() {
  runApp(MyApp());
}

main 函数是 Flutter 应用的入口点,它调用 runApp 函数来启动应用。这里我们传入一个 MyApp 实例。

2. MyApp
Dart 复制代码
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Callback Example',
      home: CallbackExample(),
    );
  }
}

MyApp 是应用的根组件,返回一个 MaterialApp,它设置了应用的标题和主页。在这个例子中,主页是 CallbackExample

3. CallbackExample
Dart 复制代码
class CallbackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Callback Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            onok();
          },
          child: Text('开始任务'),
        ),
      ),
    );
  }
}

CallbackExample 是一个无状态组件,其中包含一个 ElevatedButton 按钮。当用户点击按钮时,将调用 onok 函数。

4. onok 函数
Dart 复制代码
void onok() {
  one(123456789, "XIAOLI", (success) {
    if (success == true) {
      print("age=$age");
    } else if (success == false) {
      print("one函数回调false的逻辑");
    }
  });
}

onok 函数调用 one 函数,传入三个参数:一个 ID(123456789)、一个 name("XIAOLI")以及一个回调函数。回调函数接受一个布尔值 success,用于判断操作是否成功。

  • 如果 successtrue,打印 age 的值。
  • 如果 successfalse,打印一条失败的逻辑。
5. one 函数
Dart 复制代码
Future<void> one(int? ID, String? name, Function(bool) callback) async {
  Map<String, dynamic> list = {
    'ID': ID,
    'name': name
  };
  var num = list.length;
  // 如果数据不为空,则调用回调函数并返回成功状态
  if (num != 0) {
    callback(true);
  } else {
    callback(false);
  }
}

one 函数模拟了一个异步操作,它接受三个参数:IDname 和一个回调函数 callback

  • 使用 MapIDname 存储为键值对。
  • 计算 list 的长度,如果不为0,调用回调函数并传入 true;否则传入 false

写在后面

通过这个简单的示例,我们展示了如何在 Flutter 中实现函数调用和回调的基本使用。回调函数是处理异步操作的有效方式,它允许我们在操作完成后执行特定的逻辑。

这种模式非常适合在网络请求、文件处理或其他需要异步操作的场景中使用。通过使用回调,我们能够在操作完成后获取结果,并根据结果做出相应的处理。这种灵活性使得代码更具可读性和可维护性。

在实际应用中,你可以根据需要修改回调函数,以实现更复杂的逻辑。这种方式可以大大增强你的 Flutter 应用的响应能力和用户体验。

相关推荐
SmartBrain1 天前
深入洞察:华为BLM战略模型和BEM执行模型(图解)
华为
新知图书1 天前
Encoder-Decoder架构的模型简介
人工智能·架构·ai agent·智能体·大模型应用开发·大模型应用
银帅183350309711 天前
2018年下半年试题四:论NoSQL数据库技术及其应用
数据库·架构·nosql
文火冰糖的硅基工坊1 天前
《投资-107》价值投资者的认知升级与交易规则重构 - 上市公司的估值,估的不是当前的净资产的价值,而是未来持续赚钱的能力,估的是公司未来所有赚到钱的价值。
重构·架构·投资·投机
文火冰糖的硅基工坊1 天前
《投资-99》价值投资者的认知升级与交易规则重构 - 什么是周期性股票?有哪些周期性股票?不同周期性股票的周期多少?周期性股票的买入和卖出的特点?
大数据·人工智能·重构·架构·投资·投机
一水鉴天1 天前
整体设计 逻辑系统程序 之18 Source 容器(Docker)承载 C/P/D 三式的完整设计与双闭环验证 之2
docker·架构·认知科学·公共逻辑
芒果茶叶1 天前
并行SSR,SSR并行加载
前端·javascript·架构
数据智能老司机1 天前
数据工程设计模式——冷热数据存储
大数据·设计模式·架构
Nayana1 天前
从最简单的 icon组件开始了解Element-Plus 源码
架构·前端框架
小小前端_我自坚强1 天前
UniApp 微信小程序流水线发布全流程
前端·架构