SwiftUI篇-2 UI控件 Text Button Imag
2021-02-25 本文已影响0人
浪人残风
摘要
Text Button Image List等常用控件的使用，含源码
Simulator Screen Shot - iPhone 12 - 2021-02-22 at 13.58.01.png
Text 显示文本，相当于UILabel
import SwiftUI
struct TextContentView: View {
var body: some View {
//VStack（垂直排列视图）可以将其内部的多个视图，在垂直方向进行等距排列,VStack最多可以容纳十个子视图，
VStack(spacing: 4.0){
// 添加文本视图，文本加粗
Text("文本加粗").bold()
// 添加文本视图，文本下划线的颜色为橙色
Text("文本下划线").underline(true,color: .orange)
// 添加文本视图，设置文本颜色为橙色
Text("文本颜色为橙色").foregroundColor(.orange)
// 添加文本视图，设置文本向上的偏移值为15，设置文本的背景色为橙色
Text("文本向上的偏移值为15，设置文本的背景色为橙色").baselineOffset(15).background(Color.orange)
// 我们在Vstack视图的内部添加一个子VStack视图，就可以添加任意多的子视图
VStack{
//添加文本视图，设置文字的字体为标题样式，该样式可以根据屏幕尺寸的大小，自动调整自身的尺寸
Text("Hello, world!,Automatic").font(.system(.title,design: .monospaced)).lineLimit(2)
Text("www.hdjc8.com").tracking(10)
Text("www.hdjc8.com").blur(radius: 1)
// 添加一个具有长文字内容的文本视图，设置文本视图的行距为20，同时不限制文字的行数
Text("www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,www.hdjc8.com,www.hd").multilineTextAlignment(.leading).lineSpacing(11).lineLimit(nil)
Text("www.hdjc8.com").frame(width: 200, height: 80, alignment: .bottomTrailing).background(Color.orange)
Text("间距20").background(Color.black)
.foregroundColor(.white)
.padding(20)
Text("Hello, world!")
.font(.largeTitle)
.padding(15)
.background(Color.yellow)
.padding(15)
.background(Color.orange)
.padding(10)
.background(Color.red)
}
}
}
}
struct TextContentView_Previews: PreviewProvider {
static var previews: some View {
TextContentView()
}
}
Simulator Screen Shot - iPhone 12 - 2021-02-22 at 14.11.00.png
Button 按钮，相当于UIButton
struct ButtonContentView: View {
@State var btn5State: Bool = false
var body: some View {
VStack {
// 最基础button, 点击时间和文字
Button("按钮标题") {
print("点击了按钮")
}.padding()
.background(Color.orange)
.cornerRadius(20)
.shadow(radius: 10)
// 图文按钮
Button(action: {
print("点击来")
}) {
// 默认是横向布局(HStack)
// 图片和文字都默认渲染成 foregroundColor, foregroundColor 默认为蓝色
// 图片会撑开 button
Image("chilkoottrail")
.frame(width: 60, height: 60)
.cornerRadius(10)
Text("左图右文")
}
.padding()
.background(Color.orange)
.cornerRadius(20)
.shadow(radius: 10)
Button(action: {
print("点击来")
}) {
// 包裹一层 VStack，变为上下
VStack {
Text("上文下图")
Image("chilkoottrail")
.frame(width: 60, height: 60)
.cornerRadius(10)
}
}
// 字体颜色, 和默认图片渲染色
.foregroundColor(Color.red)
.padding()
.background(Color.orange)
.cornerRadius(20)
.shadow(radius: 10)
// 带点击button
Button.init(action: {
print("点击")
// 状态反转
self.btn5State.toggle()
}) {
VStack {
// 增加点击
Text(self.btn5State ? "btn5, 已选中" : "btn5, 未选中")
// 单独设置文字颜色
.foregroundColor(Color.red)
Image(self.btn5State ? "hiddenlake" : "chilkoottrail")
// 设置要跟随 frame 固定大小
.resizable()
// 设置图片固定大小, 60 x 60
.frame(width: 60, height: 60)
.cornerRadius(10)
}
}
.padding()
.background(self.btn5State ? Color.orange : Color.gray)
.cornerRadius(20)
.shadow(radius: 10)
Button.init(action: {
print("点击")
self.btn5State.toggle()
}) {
VStack {
Text(self.btn5State ? "btn6, 已选中" : "btn6, 未选中")
// 单独设置文字颜色
.foregroundColor(Color.red)
// 也能如此判断点击
if self.btn5State {
Image("chilkoottrail")
.frame(width: 60, height: 60)
}else {
Image("umbagog")
.frame(width: 60, height: 60)
}
}
}
.padding()
.background(self.btn5State ? Color.orange : Color.gray)
.cornerRadius(20)
.shadow(radius: 10)
}
}
}
struct ButtonContentView_Previews: PreviewProvider {
static var previews: some View {
ButtonContentView()
}
}
Image 图片，相当于UIImageView
Simulator Screen Shot - iPhone 12 - 2021-02-22 at 15.10.36.png
import SwiftUI
struct ImageContentView: View {
var body: some View {
VStack {
Image("chilkoottrail")
.frame(width: 60, height: 60)
.cornerRadius(10)
.aspectRatio(contentMode: .fit)
Image(systemName: "arkit")
.foregroundColor(.orange)
.frame(width: 60, height: 60)
Image("chilkoottrail")
.frame(width: 60, height: 60)
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
NavigationLink(destination: Text("详情")){
Image("chilkoottrail")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 100)
.clipped()
}
}
}
}
struct ImageContentView_Previews: PreviewProvider {
static var previews: some View {
ImageContentView()
}
}
List 列表，相当于UITableView
Simulator Screen Shot - iPhone 12 - 2021-02-22 at 15.13.54.png
