1. AsyncImage 异步加载图片
1.1 实现
/*
case empty -> No image is loaded.
case success(Image) -> An image succesfully loaded.
case failure(Error) -> An image failed to load with an error.
*/
/// iOS 15 开始的 API 新特性示例
/// 异步加载图片
struct AsyncImageBoocamp: View {
let url = URL(string: "https://picsum.photos/400")
var body: some View {
// asyncImage1
asyncImage2
}
// 第二种方式
var asyncImage2: some View{
AsyncImage(url: url) { phase in
switch phase{
case .empty:
ProgressView()
case .success(let returnedImage):
returnedImage
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
.cornerRadius(20)
case .failure:
Image(systemName: "questionmark")
.font(.headline)
default:
Image(systemName: "questionmark")
.font(.headline)
}
}
}
// 第一种方式
var asyncImage1: some View{
AsyncImage(url: url, content: { returnedImage in
returnedImage
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
.cornerRadius(20)
}, placeholder: {
ProgressView()
})
}
}
1.2 效果图:
2. BackgroundMaterials 背景模版的使用
2.1 实现
/// 背景模版
struct BackgroundMaterialsBootcamp: View {
var body: some View {
VStack{
Spacer()
VStack{
RoundedRectangle(cornerRadius: 4)
.frame(width: 50, height: 4)
.padding()
Spacer()
}
.frame(height: 350)
.frame(maxWidth: .infinity)
.background(.ultraThinMaterial)
.cornerRadius(30)
}
.ignoresSafeArea()
.background(
Image("therock")
)
}
}
2.2 效果图:
3. TextSelection 文本选择,复制与分享
3.1 实现
/// 文本选择
struct TextSelectionBootcamp: View {
var body: some View {
Text("Hello, World!")
.textSelection(.enabled)
}
}
3.2 效果图:
4. ButtonStyles 按钮的样式
4.1 实现
/// 按钮样式
struct ButtonStylesBootcamp: View {
var body: some View {
VStack{
Button {
} label: {
Text("Button title")
.frame(height: 55)
.frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.roundedRectangle(radius: 20))
.controlSize(.large)
Button("Button Title") {
}
.frame(height: 55)
.frame(maxWidth: .infinity)
//.buttonStyle(.plain)
.buttonStyle(.borderedProminent)
.controlSize(.large)
Button("Button title") {
}
.frame(height: 55)
.frame(maxWidth: .infinity)
//.buttonStyle(.bordered)
.buttonStyle(.borderedProminent)
.controlSize(.regular)
Button("Button title") {
}
.frame(height: 55)
.frame(maxWidth: .infinity)
.buttonStyle(.borderedProminent)
.controlSize(.small)
Button("Button title") {
}
.frame(height: 55)
.frame(maxWidth: .infinity)
//.buttonStyle(.borderless)
.buttonStyle(.borderedProminent)
.controlSize(.mini)
}
.padding()
}
}