Preview:
//
//  ButtonText.swift
//  SwiftUIDemo
//
//  Created by shiyanjun on 2023/2/1.
//

import SwiftUI

struct ButtonText: View {
    var body: some View {
        VStack {
            // 给文本设置圆角矩形背景
            Text("Hello!Hello!Hello!")
                .foregroundColor(.primary)
                .padding()
                .background(
                    Rectangle()
                        .fill(
                            // 线性渐变
                            LinearGradient(
                                gradient: Gradient(colors: [.red, .orange]),
                                startPoint: .leading,
                                endPoint: .trailing)
                        )
                        .cornerRadius(10)
                )
            // 给文本设置胶囊背景
            Text("Hello!Hello!Hello!")
                .foregroundColor(.primary)
                .padding()
                .background(
                    Capsule()
                        .fill(
                            // 角度渐变
                            AngularGradient(
                                gradient: Gradient(colors: [.red, .orange]),
                                center: .bottom
                            )
                        )
                        .cornerRadius(10)
                )
            // 给文本设置圆形背景
            Text("Hello!Hello!Hello!Hello!")
                .frame(width: 50, height: 50)
                .foregroundColor(.primary)
                .padding()
                .background(
                    Circle()
                        .fill(
                            // 角度渐变
                            AngularGradient(
                                gradient: Gradient(colors: [.red, .orange]),
                                center: .bottom,
                                angle: Angle(degrees: 0))
                        )
                        .cornerRadius(10)
                )
            
            
        }
    }
}

struct ButtonText_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ButtonText()
        }
        .environment(\.colorScheme, .light)
    }
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter