Flutter GetX真香系列。在生产环境已使用半年,使用GetX真正实现View和Controller分离,同时该库内置网络请求和一些封装组件,如Dialog,Snackbar等。GetX的状态管理我觉得在使用上比Bloc和Provider好用。话不多说先看效果。上方播放器放在AppBar中,下方为TabView,同时加载状态为骨架屏。具体实现如下。
骨架屏使用,具体用法可看Pub中的示例,很简单。
shimmer_animation: 2.1.0
GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。
GetX 有3个基本原则:
性能: GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。如果你感兴趣,这里有一个性能测试。
效率: GetX 的语法非常简捷,并保持了极高的性能,能极大缩短你的开发时长。
结构: GetX 可以将界面、逻辑、依赖和路由完全解耦,用起来更清爽,逻辑更清晰,代码更容易维护
在此再安利一个AndroidStudio插件,GetX。在创建类时直接选择GetX,会自动创建view和logic。
logic主要为网络请求和一些逻辑相关功能封装,state中主要是状态变化需要监听的类。
在view中可与provider一样在build中通过泛型的形式监听类的变化,也可通过controllr的obx进行监听。
我个人习惯使用GetBuilder的形式监听状态变化。
整个页面的view层代码如下
view层继承GetView.逻辑层就继承GetxController,网络请求继承GetConnect。
class VideoCollectPageextends GetView {
StringvideoId;
VideoCollectPage(this.videoId, {Key? key}) :super(key: key);
@override
Widgetbuild(BuildContext context) {
VideoDetailPageLogic logic = Get.find(tag:videoId);
return GetBuilder(builder:(controller){
return Column(
children: [
Container(
height:33.w,
width: double.infinity,
padding:EdgeInsets.only(left:21.w),
alignment: Alignment.centerLeft,
color:const Color(0xFFF4F4F4),
child:Text(
"已更新至${logic.state.videoDetailData?.videoDSetDtos?.length}",
style: Get.theme.textTheme.subtitle1,
),
),
Expanded(
child:CupertinoScrollbar(
child:ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return Container(
height:4.w,
);
},
physics:const BouncingScrollPhysics(),
itemBuilder: (_, index) {
return InkWell(
child:Container(
width:73.w,
padding:EdgeInsets.only(left:21.w),
child:Row(
children: [
Card(
clipBehavior: Clip.antiAlias,
child:CachedNetworkImage(
width:133.w,
fit: BoxFit.fill,
imageUrl: logic.state.videoDetailData
?.videoDSetDtos?[index].coverUrl ??
""),
shape:RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(7.w))),
),
SizedBox(
width:4.w,
),
Column(
children: [
SizedBox(
height:13.w,
),
Text(
logic.state.videoDetailData
?.videoDSetDtos?[index].title ??
"",
maxLines:2,
softWrap:true,
style:TextStyle(
color: (logic.state.currentPlayPostion ==
index)
? Colors.orangeAccent
: Get.theme.textTheme.bodyText1?.color),
),
SizedBox(
height:22.w,
),
Row(
children: [
Text(
(logic
.state
.videoDetailData
?.videoDSetDtos?[index]
.currentVideoCount
.toString() ??
"") +
"video_num".tr,
maxLines:1,
softWrap:true,
style: Get.textTheme.subtitle1,
)
],
)
],
)
],
),
),
onTap: () {
logic.state.currentPlayPostion = index;
logic.state.player.stop();
logic.state.player.reset().then((value) {
logic.state.player.setDataSource(
logic.state.videoDetailData?.videoDSetDtos?[index]
.videoUrl ??
"",
autoPlay:true);
logic.update();
});
},
);
},
itemCount:
logic.state.videoDetailData?.videoDSetDtos?.length ??0,
),
),
)
],
);
},init: logic,);
}
}
但是GetX有些人认为背离了Google官方设计的Flutter思想,我现在公司的项目中只有我会Flutter,后我又对移动端组内成员进行培训,陪训的过程中先是学习基础小部件,然后就是培训使用GetX,对移动端组内成员的陪训用了两周就要吧独立写需求了。可见GetX的简洁。
另外请关注我的个人站http://jvm.plus