Flutter实践之高仿有妖气漫画

最新推荐文章于 2024-08-08 15:34:55 发布

2401_84121958

最新推荐文章于 2024-08-08 15:34:55 发布

阅读量541

点赞数 16

分类专栏：程序员文章标签： flutter cocoa macos

本文链接：https://blog.csdn.net/2401_84121958/article/details/137856114

版权

程序员专栏收录该内容

192 篇文章 0 订阅

订阅专栏

本文介绍了Dart语言在移动端开发中的应用，特别是其Widget的使用，通过示例展示了如何使用Dart构建一个简单的App，并以Flutter模仿有妖气漫画为例，探讨了ListView和Column的用法。此外，文章还涉及了网络数据获取、Banner滚动组件和Android开发者的学习资源，包括面试复习和源码解析的重要性。

摘要由CSDN通过智能技术生成

这就是一个Widget，Container是Widget的一个子类，当然它里面有各种各样的子类供你使用。

Dart

Dart语言可以说对于移动端开发来说，都比较陌生，因为纯原生开发到现在，我只听说过可以用C#开发iOS,可能我知道的太少了，不过Dart的学习还是比较简单的，安卓开发人员用过Java，iOS开发人员用过Swift，所以再去看Dart都会有似曾相识的感觉。来看个例子:

void main() {
List list = [‘1’, ‘2’, ‘3’, ‘4’, “5”, “6”];
final str = list.join(" ").toString();
print(str);
print(list.skip(1).toList());
print(list.getRange(3, list.length).toList());
}
1 2 3 4 5 6
[2, 3, 4, 5, 6]
[4, 5, 6]

其实和Java和Swift的区别不大，一天差不多就可以入门。

怎么开发一个App

相信很多人已经接触了Flutter官方的教程，可是跟着写了一遍之后，还是一头雾水，不知道到底应该怎么写一个完整的App。下面看一个用Flutter模仿的有妖气漫画的实例：

Flutter实践之高仿有妖气漫画

屏幕快照

这个页面的整个布局都是Widget，在iOS里布局的话，这个必须是一个TableView或者CollectionView，在安卓里应该是ListView,在Flutter里这个Widget也是一个ListView,比较简单。

Flutter实践之高仿有妖气漫画

屏幕快照

这个是在一个ListView里套用了Column，就是垂直排列的意思，在iOS里其实可以用tableView解决，这整个页面可以用使用不同的Cell解决。

项目目录结构

Flutter实践之高仿有妖气漫画

结构

具体只有今日,发现这两个模块的实现，其他的还在学习研究中。

三方库

https://pub.dartlang.org 类似cocoapods.org. 第三方库里的图片加载有个(cached_network_image)还是比较好的，可以缓存，每次显示的时候有个Ease动画。具体可以在项目里运行查看。

网络获取：

/// 获取今日模块的数据
static Future requestToday() async {
final response = await http.get(todayURL);
final map = jsonDecode(response.body);
final code = map[“code”];
final _data = map[“data”];
final stateCode = _data[“stateCode”];
final message = _data[“message”];
final result = TodayResult(
code: code,
stateCode: stateCode,
message: message,
dayDataList: List()
);
final _returnData = _data[“returnData”];
final _dayDataList = _returnData[“dayDataList”];
if (_dayDataList.length == 0) {
return result;
}
for (int i = 0; i < _dayDataList.length; i++) {
final _dayItemDataList = _dayDataList[i][“dayItemDataList”];
final publish = TodayPublishDate.fromJSON(_dayDataList[i]);
result.dayDataList.add(publish);
for (int j = 0; j < _dayItemDataList.length; j++) {
final _dayItemData = _dayItemDataList[j];
if (j != _dayItemDataList.length-1) {
final dayItemData = DayItemData.fromJSON(_dayItemData);
result.dayDataList.add(dayItemData);
} else {
final dayItemData2 = DayItemData2.fromJSON(_dayItemData);
result.dayDataList.add(dayItemData2);
}
}
}
return result;

Banner滚动：

class BannerWidget extends StatefulWidget {
final List images;
BannerWidget(this.images, {Key key}): super(key: key);
_BannerWidgetState createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State {
final pageController = PageController(initialPage: 0);
Timer timer;

void resetTimer() {
clearTimer();
timer = Timer.periodic(Duration(seconds: 3), (timer) {
if (pageController.positions.isNotEmpty) {
var i = pageController.page.toInt() + 1;
pageController.animateToPage(
i,
duration: Duration(milliseconds: 100),
curve: Curves.linear
);
if (i == widget.images.length-1) {
pageController.jumpToPage(0);
i = 0;
}
}
});
}

void clearTimer() {
if (timer != null) {
timer.cancel();
timer = null;
}
}

@override
void initState() {
// TODO: implement initState
super.initState();
resetTimer();
}

@override
Widget build(BuildContext context){
if (widget.images.length == 0) {
return null;
}
return SizedBox(
height: 231.0,
width: MediaQuery.of(context).size.width,
child: PageView.builder(
controller: pageController,
physics: PageScrollPhysics(parent: ClampingScrollPhysics()),
itemCount: widget.images.length,
itemBuilder: (context, index){
final url = widget.images[index];
return Image(
image: CachedNetworkImageProvider(url),
fit: BoxFit.cover,
);
},
)
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。