SwiftUI学习笔记【基础UI】

---

前言

三天时间学习一波IOS,应该能写出个页面…吧，本文可能时不时出现帅气的脸胖…请略过

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何新建SwiftUI项目。

1.安装Xcode->新建项目：

   iOS->App->Next

   选择interface为SwiftUI然后Next创建完成

 左边就是我们需要学习的SwiftUI,右边点击Resume一会儿就出现界面了

我靠…kotlin?!,Flutter?!!,compose!!!..平复一下心情毕竟第一次玩。

import SwiftUI

struct ContentView: View {
   
   
    var body: some View {
   
   
        Text("hello wold")
    }
}

struct ContentView_Previews: PreviewProvider {
   
   
    static var previews: some View {
   
   
        ContentView()
    }
}

二、SwiftUI

SwiftUI is a modern way to declare user interfaces for any Apple platform. Create beautiful, dynamic apps faster than ever before. 这么牛🍺么,还算惊讶毕竟Flutter支持6端。

1.SwiftUI-Text

Text字体大小最小是.font(.thin)。字体不能再小了…姿势不对?..瞬间打脸拿去用吧font(.system(size:111))。[Android和Flutter里面TextView]

Text常用属性

属性	意义
font	设置文本默认字体
fontWeight	设置字体粗细
foregroundColor	设置文本前景色[字体颜色]
multilineTextAlignment	设置多行文本的对其方式
padding	设置文本距离内容的距离
frame	设置文本所在矩形框的大小
blur	设置文本模糊度
border	设置文本矩形框边框的细线颜色
clipShape	裁剪文本所在的画布样式

import SwiftUI

struct ContentView: View {
   
   
    var body: some View {
   
   
        Text("helloWold")
        .font(.title)//字体大小...字体大小都要规定死么【thin最小了么】
        .fontWeight(.bold)//字体样式
        .foregroundColor(Color.green)//字体颜色
        .multilineTextAlignment(.center)//文字多行对其方式
        .padding(11.0)//距离内容的距离
        .frame(width: 333.0, height: 222.0)//宽和高
    }
}

struct ContentView_Previews: PreviewProvider {
   
   
    static var previews: some View {
   
   
        ContentView()
    }
}

这里提一下:Flutter和Compose写习惯了所以觉得手写代码比较方便。当然可以用inspector进行属性的设置。如果属性不熟悉。按住command鼠标左键点击试图中显示的文本选择Show SwiftUI inspector或者在代码界面ctrl+option+触摸板按下。其他View同样.不再提示。

2.SwiftUI-VStack&HStack&ZStack

垂直排列布局HStack 和 水平排列布局行VStack。[Android里面LineaLayout(v,h)和Flutter里面Row和Colum]

VStack:手写或者Xcode右上角点击+拖动到代码里边即可。

为什么不能像Flutter里面一次性设置padding呢?是我使用有问题么,不吝赐教.flutter里面 padding:EdgeInsets.only(left:10,right:111,top:100,bottom:10)即可,但是SwiftUI里面笔记尴尬。需要多次设置如下

import SwiftUI

struct ContentView: View {
   
   
    var body: some View {
   
   
        //列
        VStack(alignment:.leading) {
   
   
            Text("Study VStack")
            .font(.title)
            
            Text("study VStack[Flutter,Android,H5]")
           .font(.subheadline)
        }.padding([.top, .trailing], 111).padding(.bottom,30.0)
        /**这里一次性设置只能设置距孩子同样的距离。所以想设
        置Flutter里面的(left:10,right:111,top:100,bottom:10)
        需要.padding(.left,10.0).padding(.trailing,111).padding(.top,100).padding(.bottom,10)
        **/
        
    }
}

struct ContentView_Previews: PreviewProvider {
   
   
    static var previews: some View {
   
   
        ContentView()
    }
}

HStack:手写或者Xcode右上角点击+拖动到代码里边即可。

import SwiftUI

struct ContentView: View {
   
   
    var body: some View {
   
   
        //行
          HStack(alignment:.lastTextBaseline){
   
   
            Text("Study HStack")
                           .font(.title)
            Text("水平列")
                           .font(.subheadline)
            Text("结束").font(.footnote)
        }.padding(.all,10).frame(width:333).foregroundColor(.blue)
        
    }
}
struct ContentView_Previews: PreviewProvider {
   
   
    static var previews: some View {
   
   
        ContentView()
    }
}

ZStack:手写或者Xcode右上角点击+拖动到代码里边即可。

相对布局Flutter里面Stack,Android里面RelatedLayout

import SwiftUI

struct ContentView: View {
   
   
    var body: some View {
   
   
     ZStack(alignment: Alignment(horizontal: .trailing