AsyncImage/异步加载图片, BackgroundMaterials/背景模版, TextSelection/文本复制与分享, ButtonStyles/按钮样式的使用-CSDN博客

本文链接：https://blog.csdn.net/u011193452/article/details/131716962

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()
    }
}