跨平台Flutter 开源鸿蒙开发指南(三):使用thirdParty的dio库实现网络请求 示例

条件:成功安装androidStudio以及配置环境变量 win11

1

过程参考辅助文章Flutter鸿蒙开发指南(三):使用dio库实现网络请求

1.1 在参考文章1.3.2 之前步骤

我的androidStudio是第一次打开情况下进行下载install插件"flutter"在

1.2 autogit代码托管网站创建好项目名

1.2.1在本地电脑创建好空文件夹如下

双金进入a1_useDioDemo文件夹,地址栏输入powershell

在命令行下git clone 项目

1.2.2 flutter插件在androidStudio代码编辑器下载成功后有提示需要restart软件请重启

1.2.3 点击 New Flutter Project

选择适配了鸿蒙的"flutter_flutter"的SDK , 可以点击url进行clone下载

1.2.4 报错解决

这个报错是 Dart/Flutter 项目的一个硬性命名规则,很容易踩坑。我给你一步步解决:

  1. 问题原因
    Dart 规定项目(包)名必须遵循 lower_case_with_underscores 格式:
    只能用小写字母、数字和下划线 _
    不能有大写字母、连字符 - 或空格
    不能以数字开头
    你的项目名 use_Dio_Demo 里有大写字母 D,所以不符合规范。
  2. 解决方法
    直接修改 Project name 输入框里的内容,改成纯小写 + 下划线的格式即可,比如:
    ✅ use_dio_demo
    ✅ dio_demo
    ✅ my_dio_project
    修改后,点击 Create 就能正常创建项目了。

刚才clone下来的文件夹下手动新建一个文件夹use_dio 这个是空文件夹如下进行选择Project locatio

成功后进行加载
Dart and Flutter learning pathway 此学习路径将引导您掌握Dart和Flutter的基本知识。
Flutter 学习资源包括 Flutter 教程、示例代码、工作坊和实用技巧在内的资源目录

1.2.5 在终端输入"flutter create --platform ohos ."创建鸿蒙的项目

报错解决:加上 .

这个命令会在当前目录 生成一个支持 OpenHarmony(OHOS)平台的 Flutter 项目。

项目分包:选中lib目录选择New再选择Directory,该操作为新建文件夹。

新建以下的目录,每个目录的作用如图所示:

1.2.6 返回上一层目录即git clone的目录



二、使用Dio实现网络请求

由于我后续打算做一个商城的项目,这里的代码我就不使用git上传了,而且我打算在下篇能顺便演示git的回撤操作。在pubspec.yaml添加dio的库,dio的库为:^5.5.0+1。

2.1 简单总结

dio: 5.5.0+1:都会安装最新的5.5.x版本,5.5.0+1约等于5.5.0

provider: ^6.1.2:安装6.1.2或者更新的6.x版本,但别装7.0

2.2 接口说明

本篇先使用网上找的一个比较简单的接口进行接口的请求示例。后续再全部更换成商城的。

这里使用的是猫咪图片请求接口

基本说明:

接口地址:https://api.thecatapi.com/v1/images/search

返回格式:json

请求方式:get

请求示例:https://api.thecatapi.com/v1/images/search?limit=1

请求参数说明:

名称 类型 必填 说明

limit int 选填 要返回的图片数

page int 选填 页码

order int 选填 按照上传日期排序

has_breeds int 选填 是否包含猫品种信息

breed_ids string 选填 品种的ID

category_ids string 选填 品种的ID

sub_id int 选填 过滤具有上传时使用的值的图像sub_id

返回参数说明:

名称 类型 说明

url string 图片链接

width int 宽度

height int 图片高度

JSON返回示例:

{ "id": "MTgxNTAxOA", "url": "https://cdn2.thecatapi.com/images/MTgxNTAxOA.jpg", "width": 560, "height": 443 }

AI写代码

2.3 使用Dio进行网络请求并渲染UI

2.1 辅助文章中继续 运行项目

鸿蒙端,打开ohos的项目并且点击右上角启动项目即可。点击猫咪图库,即可看到可爱的小猫~ 在如下截图中添加sdk版本正常情况下会弹窗选择添加

后run,success

三、结语

本篇文章到此结束,感谢各位阅读。如果本篇文章对你有帮助,那就请点个赞吧。后续计划打算做一个商城项目,目前仍在学习,希望能早日做出并且发布在CSDN上帮助大家。

最后,欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net

end

相关推荐
晚烛23 分钟前
CANN 赋能智慧医疗:构建合规、高效、可靠的医学影像 AI 推理系统
人工智能·flutter·零售
晚霞的不甘38 分钟前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小哥Mark2 小时前
Flutter开发鸿蒙年味 + 实用实战应用|绿色烟花:电子烟花 + 手持烟花
flutter·华为·harmonyos
小镇敲码人2 小时前
剖析CANN框架中Samples仓库:从示例到实战的AI开发指南
c++·人工智能·python·华为·acl·cann
前端不太难3 小时前
HarmonyOS 游戏里,Ability 是如何被重建的
游戏·状态模式·harmonyos
lbb 小魔仙3 小时前
【HarmonyOS实战】React Native 鸿蒙版实战:Calendar 日历组件完全指南
react native·react.js·harmonyos
一只大侠的侠4 小时前
Flutter开源鸿蒙跨平台训练营 Day 3
flutter·开源·harmonyos
盐焗西兰花4 小时前
鸿蒙学习实战之路-Reader Kit自定义字体最佳实践
学习·华为·harmonyos
_waylau4 小时前
鸿蒙架构师修炼之道-架构师的职责是什么?
开发语言·华为·harmonyos·鸿蒙
一只大侠的侠5 小时前
【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 2 鸿蒙跨平台开发环境搭建与工程实践
flutter·开源·harmonyos