文章目录
前言
三天时间学习一波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, vertical: .top)