SwiftUI-APP 布局

最新推荐文章于 2024-08-31 11:38:45 发布

学术袁

最新推荐文章于 2024-08-31 11:38:45 发布

阅读量3.7k

点赞数

分类专栏： iOS 文章标签： swift SwiftUI SwiftUI 布局介绍

本文链接：https://blog.csdn.net/junhuahouse/article/details/95911275

版权

iOS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

引言

SwiftUI应用下的APP，是我非常期待的技术； 尽管现在Flutter已如火如荼，如日中天！毫不掩饰的表达，我现在使用的跨平台技术是React-Native。到目前为止，从开始学习到目前仅仅使用了一年零2个月的时间。与目前火热的跨平台技术一比较，我滴乖乖，~~眼看就要凉凉！~~ 没办法，需要花点时间学习另一门新的技术了。从市面上来看，虽然现在在技术上几乎每个人都在大肆的宣扬Flutter多么多么好。但是，我还是想要去学习目前还不够热门的技术 —— SwiftUI。
我选择SwiftUI的原因很简单，自学Swift语言已有半年时间，通过SwiftUI技术能够更强化和深入理解swift语言和iOS开发的技术。本身我作为Android技术开发人员，但看到swift语言之后，却深深被她的魅力所吸引。

SwiftUI并非跨平台的技术，至少不能用她写Android。

技术

SwfitUI我们知道是和Google的Flutter一样的跨平台APP的技术。学习她、研究她需要一个过程。那么这么一个过程，我打算从布局开始。

开启一个项目

在这里插入图片描述
点击下载Xcode 11 beta 3 之后安装，创建新的项目 —— shift + commend + N
当前macOS系统版本和Xcode版本如上图。对于Xcode 11 beta 3 在编写SwiftUI时实时展示UI，仅支持macOS系统版本在 macOS 10.15 later 否则，无法显示实时的UI。
在这里插入图片描述
但目前为止，我的电脑还没有推送更新最新系统版本macOS10.15的消息。虽然很多人更新到了，他们使用了别的方式——先在Apple开发者种子计划中注册

布局后的效果展示

在这里插入图片描述
效果图源码在这里，

TopAssets.swift

import SwiftUI

struct TopAssets : View {
    var body: some View {
        VStack{
            ZStack {
                Image("bg_wallet_top").resizable().frame(height: 160) //背景图
                VStack(alignment: .leading){
                    HStack{
                        Image("default_avater_female") //头像
                            .resizable()
                            .frame(width:50, height:50)
                            .clipShape(Circle())
                            .overlay(Circle().stroke(Color.white, lineWidth: 1))
                            .shadow(radius: 1).padding(EdgeInsets(top: 0, leading: 10, bottom: 0,trailing: 0))
                        
                        VStack(alignment: .leading){
                            //用户名
                            Text("王者荣耀").color(.white).font(.system(size: 16)).padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 0))
                            //资产信息
                            Text("资产=$200.68").color(.white).font(.system(size: 16)).padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 0))
                        }
                        
                    Spacer()
                    }.frame(height:55).border(Color.white, width: 1, cornerRadius: 6).offset(y:-30)
                }
                
            }.frame(height:160).border(Color.green, width: 2, cornerRadius: 1)
        }
        
    }
}

#if DEBUG
struct TopAssets_Previews : PreviewProvider {
    static var previews: some View {
        TopAssets()
    }
}
#endif

ButtonItem.swift

import SwiftUI

struct ButtonItem : View {
    var body: some View {
        VStack{
            HStack(alignment: .center){
                ///数字货币图标
                Image("ic_wallet_uto").resizable().frame(width:30, height:30)
                Text("UTO").bold().color(.gray).font(.system(size: 20)) //货币名称
                Spacer()
                VStack(alignment: .trailing){
                    Text("$109.78").bold().color(.gray).font(.system(size: 14)) //美元金额
                    Text("¥59.63").bold().color(.gray).font(.system(size: 14)) //rmb金额
                }
            }
            .frame(height:45)
                .border(Color.gray,
                        width: 1,
                        cornerRadius: 5)
                .padding(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 15))
            
            HStack(alignment: .center){
                Image("ic_wallet_eth").resizable().frame(width:30, height:30)
                Text("ETH").bold().color(.gray).font(.system(size: 20))
                Spacer()
                VStack(alignment: .trailing){
                    Text("$139.46").bold().color(.gray).font(.system(size: 14))
                    Text("¥798.52").bold().color(.gray).font(.system(size: 14))
                }
            }
            .frame(height:45)
                .border(Color.gray,
                        width: 1,
                        cornerRadius: 5)
                .padding(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 15))
        }
        
    }
}

#if DEBUG
struct ButtonItem_Previews : PreviewProvider {
    static var previews: some View {
        ButtonItem()
    }
}
#endif

组件属性补充：

查看源码：长按 commend + 点击
在这里插入图片描述

组件HStack VStack ZStack

然后从源码中可以看到
HStack 官方解释： A view that arranges its children in a vertical line.
VStack 官方解释： A view that arranges its children in a horizontal line.
ZStack 官方解释： A view that overlays its children, aligning them in both axes.

从其中一个 HStack 做分析，查看源码
在这里插入图片描述
查看他们的源码可以发现其中一个特点，竖直方向排序的View，从构造方法init来看参数VerticalAlignment 、spacing。
参数VerticalAlignment ，说明智能调整对齐方式且与排序方向垂直。
参数spacing，表示对子view排序的view之间的距离。
参数content，(挂尾)闭包。子view的内容就由它而来！

组件Text

从我浅浅的水平看，去查看源码，找view的属性。一般从两点：

方式一，原始属性

在这里插入图片描述

方式二，扩展属性

在这里插入图片描述

方式三，继承来的属性

在这里插入图片描述
从源码来看，Text展示的文字内容就来自这里的init的了。

设置字体属性，比如字体颜色、字体大小、粗度、字体样式、下划线等等！以下截图部分用来证明上面文字描述。

组件Image

上面布局样式，图片展示则是使用组件Image的构造方法
在这里插入图片描述
其中源码中有一个比较重要的方法，用户调整图片的适配。
public func resizable(capInsets: EdgeInsets = EdgeInsets(), resizingMode: Image.ResizingMode = .stretch) -> Image

而且还有一些特别的方法，设置图片为圆形。源码里是这么描述的，还给我用了注释。
在这里插入图片描述
而且还有一些特别的方法，设置图片为圆角。源码里是这么描述的，还给我用了注释。

当然除了Image的原始属性，还有继承自View而得来的属性。源码中说了

然后呢就能在 extension View 中找到很多有用的
在这里插入图片描述
因此可以看到很多好用的属性为我们提供