(原创)getX+Dio实现Flutter悬浮置顶的页面效果

news/2024/4/20 12:48:40/

前言

Flutter的开发相对已经比较成熟了,现在市面上不少商业应用也在使用这个技术
老实说,Flutter去实现一些基础的ui界面,效率还是很高的
当然前提是你对它要有一定的了解。
今天就演示一下,如何去实现一个基础悬浮置顶的页面效果
先看下具体的成品图:
在这里插入图片描述

核心代码

首先看下代码的结构:
在这里插入图片描述

main是项目主入口,因为用到了getx,所以使用的是GetMaterialApp:

class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.Widget build(BuildContext context) {return GetMaterialApp(debugShowCheckedModeBanner: false,title: 'getx+Dio',home:  NestedScrollViewDemo(),// home:  BannerDemo(),);}
}

Models用来存放实体bean,这个不用多说
Controller包下面主要用来存放的是我们的状态控制
相当于安卓里面的Viewmodel。用来实现数据变化时ui的更新的
它继承的是GetxController
利用.obs的方式定义了一些状态变量

真正请求网络数据还是在ApiService类中:

class ApiService {static Future<List<DataElement>?> fetchNews() async {var response = await Dio().get("https://www.wanandroid.com/article/listproject/1/json?page_size=30");if (response.statusCode == 200) {return dataElementFromJson(json.encode(response.data["data"]["datas"]));}return null;}
}

最后,悬浮置顶页面的ui效果就在NestedScrollViewPage类中了
这块主要用到的widget是NestedScrollView和CustomScrollView
tab切换的监听用到了TabController
大体代码就是如此,其实整体和安卓的MVVM有一点类似
当然这里还没有用双向绑定,
网络请求也没用Retrofit就是(Flutter中也可以使用Retrofit哦)
可以画一个大概的图:
在这里插入图片描述
当然,实际开发中用到了json 转换为 Dart实体类的时候,我用的是这个网站:
json_to_dart
它可以很方便的将json转换为你要的实体类,
设置好类名点击按钮即可,如下图:
在这里插入图片描述

完整代码

贴一下这个小示例的完整代码路径:
https://gitee.com/xiongyp_git/FlutterHybridProject/tree/new_gradlesetting_suspended_ceiling/

学习资料分享

最后,这篇文章涉及到dio和getx的学习,也贴一些学习资料吧:
flutter网络请求库对比
Flutter-腾讯云博客
GetX基础教程


http://www.ppmy.cn/news/81433.html

相关文章

第十一章 Productions最佳实践 - 生产电子表格

文章目录 第十一章 Productions最佳实践 - 生产电子表格生产电子表格界面设计 第十一章 Productions最佳实践 - 生产电子表格 生产电子表格 维护一个电子表格是很有帮助的&#xff0c;它可以逐个应用程序地组织信息系统。作为一般准则&#xff0c;应该为每个提供传入或传出数…

LeetCode 496 下一个更大元素 I

题目&#xff1a; nums1 中数字 x 的 下一个更大元素 是指 x 在 nums2 中对应位置 右侧 的 第一个 比 x 大的元素。 给你两个 没有重复元素 的数组 nums1 和 nums2 &#xff0c;下标从 0 开始计数&#xff0c;其中nums1 是 nums2 的子集。 对于每个 0 < i < nums1.leng…

电源方案对比

电源 1.方案选择&#xff1a;1 LM2596 2 MP1584 3&#xff1a;TPS54301LM25962.MP1584&#xff1a;3.TPS5430 2.1输出2A电流的纹波2.2 输出3A电流的纹波3.动态响应4.发热5.电源转换效率6.综合指标reference 1.方案选择&#xff1a;1 LM2596 2 MP1584 3&#xff1a;TPS5430 1LM…

Java【问题 05】yml配置文件boolean一直为false问题分析解决

yml配置文件boolean一直为false 1.问题说明2.bug复现2.1 yml配置2.2 配置类2.3 测试类2.4 结果输出 3.源码分析3.1 Data3.2 Generate Getters and Setters 4.问题解决4.1 修改参数名称4.2 添加Getter和Setter方法 1.问题说明 application.yml配置文件里的布尔值获取后一直为fa…

5。STM32裸机开发(4)

嵌入式软件开发学习过程记录&#xff0c;本部分结合本人的学习经验撰写&#xff0c;系统描述各类基础例程的程序撰写逻辑。构建裸机开发的思维&#xff0c;为RTOS做铺垫&#xff08;本部分基于库函数版实现&#xff09;&#xff0c;如有不足之处&#xff0c;敬请批评指正。 &…

python FastAPI 如何解决并发和性能问题

FastAPI 是一个基于 Python 3.6 的 Web 框架&#xff0c;它具有简单易用、高性能、快速编写 API 等特点。下面介绍一些 FastAPI 中解决并发和性能问题的方法&#xff1a; 1&#xff09;异步编程 FastAPI 使用基于 asyncio 的异步编程模型&#xff0c;在处理 I/O 密集型任务&a…

市面上常见的语音芯片的IO口有哪些作用

语音芯片的IO口有哪些作用&#xff1f; 语音芯片的IO口一般有多种用途&#xff0c;包括以下几种&#xff1a; 1. 语音输入&#xff1a;可以通过外部麦克风接口&#xff0c;将外部声音信号输入到语音芯片中&#xff0c;进行语音信号处理。 2. 语音输出&#xff1a;语音芯片可…

极兔、菜鸟都盯上了IPO,物流格局再生变

2023年以来&#xff0c;快递物流企业奔赴港股上市的传闻就不断传出。先是2月份&#xff0c;有消息称&#xff0c;极兔物流计划于今年下半年在香港上市&#xff1b;另一边菜鸟物流、顺丰速递等公司&#xff0c;也将赴港上市提上了议事日程。 值得注意的是&#xff0c;作为老牌的…

Linux安装nginx详细步骤

一、安装nginx依赖 #安装gcc yum install gcc-c#安装PCRE pcre-devel yum install -y pcre pcre-devel#安装zlib yum install -y zlib zlib-devel#安装Open SSL yum install -y openssl openssl-devel二、下载并解压nginx安装包 1.下载nginx安装包 wget http://nginx.org/do…

【Linux】进程信号(上)

文章目录 1.信号概念理解信号产生信号保存信号处理 2. 信号的产生证明输入 CTRL C 就是向前台进程发送信号signal 函数内部参数传递的理解对于信号自定义动作的捕捉问题 3.信号产生的方式1.从键盘输入2.使用系统调用向进程发送信号killraiseabort 3.由软件条件产生信号 1.信号概…

大数据面试题汇总

Hadoop基础 介绍下Hadoop Hadoop的特点 说下Hadoop生态圈组件及其作用 Hadoop主要分哪几个部分?他们有什么作用? Hadoop 1.x&#xff0c;2x&#xff0c;3.x的区别 Hadoop集群工作时启动哪些进程?它们有什么作用? 在集群计算的时候&#xff0c;什么是集群的主要瓶颈 …

学系统集成项目管理工程师(中项)系列24a_信息系统集成专业技术知识(上)

1. 信息系统的生命周期 1.1. 【19下选10】 1.2. 立项 1.2.1. 形成《需求规格说明书》并确定立项 1.2.1.1. 【21上选11】 1.3. 开发 1.3.1. 【22下选10】 1.3.2. 以立项阶段所做的需求分析为基础&#xff0c;进行总体规划。之后&#xff0c;通过系统分析、系统设计、系统…

Maven基础学习---4、Maven的使用(IDEA)

1、创建父工程&#xff08;本人用的是IDEA2022.3&#xff09; 1、创建Project 2、配置Maven信息 如果没有提前设置过Setting for new project这个配置&#xff0c;那么每次创建Project后都需要设置Maven家目录位置&#xff0c;否则IDEA将使用内置的Maven核心程序&#xff08;…

python 编译安装与脚本安装

编译安装的一般步骤&#xff1a; 安装依赖&#xff0c;安装依赖的第三方的工具&#xff0c;yum可以解决 编译安装的包中都有&#xff1a;configure 文件 进行预编译&#xff1a;检查你的环境是否合格 ./configure --prefixxxx 生成编译的文件&#xff1a;MakeFile python安装&…

面试:前端需要注意哪些SEO

合理的 title 、 description 、 keywords &#xff1a;搜索对着三项的权重逐个减小&#xff0c; title 值强调重点即可&#xff0c; 重要关键词出现不要超过2次&#xff0c; 而且要靠前&#xff0c;不同⻚⾯ title 要有所不 同&#xff1b; description 把⻚⾯内容高度概括&am…

责任链设计模式

代码精简10倍&#xff0c;责任链模式yyds 目录 背景 什么是责任链 使用场景 结语 背景 最近&#xff0c;我让团队内一位成员写了一个导入功能。他使用了责任链模式&#xff0c;代码堆的非常多&#xff0c;bug 也多&#xff0c;没有达到我预期的效果。 实际上&#xff0…

设计模式-从回调函数入手理解观察者模式

文章目录 一、回调函数二、观察者模式&#xff08;发布订阅模式&#xff09; 本文参考&#xff1a; 入门对比&#xff1a;Java设计模式补充&#xff1a;回调模式、事件监听器模式、观察者模式&#xff08;转&#xff09;_Chen4852010的博客-CSDN博客 参考例子&#xff1a;观察者…

SpringBoot 插件 spring-boot-maven-plugin 原理,以及SpringBoo工程部署的 jar 包瘦身实战

spring-boot-maven-plugin 我们直接使用 maven package &#xff08;maven自带的package打包功能&#xff09;&#xff0c;打包Jar包的时候&#xff0c;不会将该项目所依赖的Jar包一起打进去&#xff0c;在使用java -jar命令启动项目时会报错&#xff0c;项目无法正常启动。这…

Web安全:文件上传漏洞测试.

Web安全&#xff1a;文件上传漏洞测试. 现在大多的网站和Web应用系统都会有上传功能&#xff08;比如&#xff1a;文档&#xff0c;图片&#xff0c;头像&#xff0c;视频上传等.&#xff09;&#xff0c;而程序员在开发文件上传功能时&#xff0c;没有对代码做严格校验上传文…

TDengine 成功“晋级” Percona Live 2023 银牌赞助商,开发者驻足关注

带着创新的数据技术走遍全球 这一次 陶建辉带着 TDengine 飞到了丹佛...... 2023 年 5 月 22-24 日&#xff0c;一年一度的开源数据库领域全球最具影响力峰会 Percona Live 2023 在丹佛技术中心万豪酒店举办。Percona Live 是全球持续举办最久的独立开源数据大会&#xff0c…