前言

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

核心代码

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

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

class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget 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转换为你要的实体类，
设置好类名点击按钮即可，如下图：