共计 3790 个字符,预计需要花费 10 分钟才能阅读完成。
前言
在后面的文章中咱们对 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<List<MovieModel>> 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<MovieModel> movieModelFromJson(String str) => List<MovieModel>.from(json.decode(str).map((x) => MovieModel.fromJson(x)));
String movieModelToJson(List<MovieModel> data) => json.encode(List<dynamic>.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<String, dynamic> 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<String, dynamic> 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<MovieModel>().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,
)
],
);
},
);
}
}),
);
}
成果展现
总结
该案例中最重要的通过继承自 GetxController
拆散了 UI 和业务逻辑 ,并通过Get.put
对控制器进行了实例化,而后应用 Obx
对数据进行了一个状态刷新。
正文完