flutter引导页、布局、定时器、网络异步数据更新

最新推荐文章于 2024-08-31 07:08:41 发布

置顶

尐噺

最新推荐文章于 2024-08-31 07:08:41 发布

阅读量2.7k

点赞数 1

分类专栏： Flutter Android 开发文章标签： flutter

本文链接：https://blog.csdn.net/Apple_hsp/article/details/105854151

版权

这篇博客详细介绍了Flutter的引导页制作，包括Stack层叠布局、Align相对布局的安卓、iOS与Flutter实现，以及定时器的多种用法。同时，讲解了网络异步数据更新，推荐使用Dio库，并探讨了数据解析方法。此外，还讨论了Flutter中的异步操作和事件处理。

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

疫情刚好静下心来回归过去的工作，博主要开始学习flutter，博主会边学习边实战项目连续连贯实现，大约一周会出一篇，源码地址,开源不易，麻烦动手点星，谢谢，本开源不做商业使用，里面涉及用到api接口资源等只供学习，项目开发会分博客文章，请点击链接到对应的文章中浏览，建议其实万变不离其中，说到底还是离不开原生，学习之前往补充原生知识，本片主要讲的是引导页，其中涉及到技术点层叠布局、相对定位、容器、定时器、异步数据更新，再次感谢大家能耐心观看，谢谢！

1 布局详解

1.1 Stack层叠布局

在flutter中层叠布局就是叠加效果，如果做过安卓的话，那么就知道FrameLayout,其实就依次往上一层view层叠效果
在这里插入图片描述
ios 最原始addSubview，其实就是一个层叠布局效果。

- (void)viewDidLoad {
   
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIView * view1 = [[UIView alloc]initWithFrame:CGRectMake(20, 40, 200, 200)];
    view1.backgroundColor=[UIColor redColor];
    UIView * view2 = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];
    view2.backgroundColor=[UIColor greenColor];
    [view1 addSubview:view2];
    [self.view addSubview:view1];
}

下面是flutter的实现，children包含子组件数组，依次视图叠加效果，而Positioned是用来做绝对位置的，左右头底，四个点需要自己计算适配哦。
在这里插入图片描述

1.2 Align 相对布局详解

1.2.1 安卓相对布局

在安卓中大家应该很熟悉RelativeLayout,这可是我们安卓最常用最无敌布局神器，再复杂的业务都是浮云。

布局	方向
layout_centerHorizontal	水平居中
layout_alignParentRight	右对齐
layout_alignParentLeft	左对齐
layout_alignParentTop	顶部对齐
layout_alignBottom	居底部对齐
layout_centerInParent	居中
layout_centerVertical	竖向对齐

1.2.2 ios相对布局

ios我们开发的时候，我们用的Autolayout布局，解析如下：

UIView *subView = [[UIView alloc]init];
subView.backgroundColor = [UIColor greenColor];
[self.view addSubview:subView];
subView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1. constant:150]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.3 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self