GetX系列教程---新闻案例
前言
在前面的文章中我们对GetX
的基础知识进行了讲解,包括状态管理、路由管理、依赖管理、国际化等。
今天我们来将一个小案例用于结合前面学习的知识做一个总结,这个案例主要是讲解网络数据请求、模型处理、GetXController,用MVC模型来实现。
视频教程地址
零基础视频教程地址
请求网络数据
我们新建一个ApiService.dart
用于请求网络数据,该数据是一个新闻列表的数据。
import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter_getx_example/GetXApiDataExample/MovieModule/Models/MovieModel.dart';
class ApiService {static Future> fetchMovie() async {
var response = await Dio().get("http://apis.juhe.cn/fapig/douyin/billboard?type=hot_video&size=50&key=9eb8ac7020d9bea6048db1f4c6b6d028");
if (response.statusCode == 200) {
var jsonString = response.data['result'];
return movieModelFromJson(json.encode(response.data["result"]));
}
}}
定义模型类 我们新建一个
MovieModel.dart
用来对网络请求回来的数据进行模型转换。// To parse this JSON data, do
//
//final movieModel = movieModelFromJson(jsonString);
import 'dart:convert';
List movieModelFromJson(String str) => List.from(json.decode(str).map((x) => MovieModel.fromJson(x)));
String movieModelToJson(List data) => json.encode(List.from(data.map((x) => x.toJson())));
class MovieModel {
MovieModel({
this.title,
this.shareUrl,
this.author,
this.itemCover,
this.hotValue,
this.hotWords,
this.playCount,
this.diggCount,
this.commentCount,
});
String title;
String shareUrl;
String author;
String itemCover;
int hotValue;
String hotWords;
int playCount;
int diggCount;
int commentCount;
factory MovieModel.fromJson(Map json) => MovieModel(
title: json["title"],
shareUrl: json["share_url"],
author: json["author"],
itemCover: json["item_cover"],
hotValue: json["hot_value"],
hotWords: json["hot_words"],
playCount: json["play_count"],
diggCount: json["digg_count"],
commentCount: json["comment_count"],
);
Map toJson() => {
"title": title,
"share_url": shareUrl,
"author": author,
"item_cover": itemCover,
"hot_value": hotValue,
"hot_words": hotWords,
"play_count": playCount,
"digg_count": diggCount,
"comment_count": commentCount,
};
}
使用控制器对数据进行处理 我们对请求回来的网络数据转化为
Model
,并在请求前增加一个loading
,当网络数据请求回来的时候关闭loading
,我们来看一下代码
import 'package:flutter_getx_example/GetXApiDataExample/ApiModule/ApiService.dart';
import 'package:flutter_getx_example/GetXApiDataExample/MovieModule/Models/MovieModel.dart';
import 'package:get/get.dart';
class MovieController extends GetxController {var isLoading = true.obs;
// ignore: deprecated_member_use
var movieList = List().obs;
@override
void onInit() {
// TODO: implement onInit
fetchMovie();
super.onInit();
}void fetchMovie() async {
try {
isLoading(true);
var movie = await ApiService.fetchMovie();
if (movie != null) {
movieList.assignAll(movie);
}
} finally {
isLoading(false);
}
}
}
在视图层展示列表数据 前面我们对网络请求、模型、数据处理进行了处理,我们最终的目的是需要把数据展示到页面上,那我们接着来看一下视图的代码
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXApiDataExample/MovieModule/Controller/MovieController.dart';
import 'package:get/get.dart';
class MovieListView extends StatelessWidget {final MovieController movieController = Get.put(MovieController());
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Movie"),
),
body: Obx(() {
if (movieController.isLoading.value) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return ListView.builder(
itemCount: movieController.movieList.length,
itemBuilder: (context, index) {
return Column(
children: [
Row(
children: [
Container(
width: 100,
height: 120,
margin: EdgeInsets.all(10),
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: Image.network(
movieController.movieList[index].itemCover,
width: 150,
height: 100,
fit: BoxFit.fill,
// color: Colors.orange,
// colorBlendMode: BlendMode.color,
),
),
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
movieController.movieList[index].author,
style: TextStyle(
color: Colors.black45,
fontSize: 16
),
)
],
),
),
],
),
Container(
color: Colors.grey.shade300,
height: 2,
)
],
);
},
);
}
}),
);
}
效果展示
总结 【GetX系列教程---新闻案例】该案例中最重要的通过继承自
GetxController
分离了UI和业务逻辑,并通过Get.put
对控制器进行了实例化,然后使用Obx
对数据进行了一个状态刷新。推荐阅读
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 【欢喜是你·三宅系列①】⑶
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 你不可不知的真相系列之科学
- 人脸识别|【人脸识别系列】| 实现自动化妆
- 2018-06-13金句系列7(金句结构-改编古现代诗词)
- Unity和Android通信系列文章2——扩展UnityPlayerActivity
- 乡野村趣系列之烧仙草
- Java内存泄漏分析系列之二(jstack生成的Thread|Java内存泄漏分析系列之二:jstack生成的Thread Dump日志结构解析)
- 15、IDEA学习系列之其他设置(生成javadoc、缓存和索引的清理等)