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

Android_xiong_st

已于 2023-06-13 10:29:28 修改

阅读量783

点赞数

分类专栏： Flutter&Compose 文章标签： flutter

于 2023-05-24 11:36:47 首次发布

本文链接：https://blog.csdn.net/Android_xiong_st/article/details/130812909

版权

Flutter&Compose 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

前言

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

核心代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  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 to Dart

实际开发中用到了json 转换为 Dart实体类的时候，我用的是这个网站：
json_to_dart
它可以很方便的将json转换为你要的实体类，
设置好类名点击按钮即可，如下图：
在这里插入图片描述
现在也可以通过IDE插件生成
下载Json To Dart插件和FlutterJsonBeanFactory插件，
前者可配置多种属性，比如子类是否以内部类生成等等。

使用也很简单：

可以设置不同的生成规则：