Text, Shapes, Colors 的使用

news2024/11/19 7:48:19

1. Text 的使用

// 多行文本
// Hello, World! This is the Swiftful Thinking Bootcamp. I am really enjoying this course and learning alot.

// .lowercased() 文字小写 .uppercased() 文字大写 capitalized: 以单词形式显示
Text("Hello, World!".capitalized)
//.font(.body) //字体大小
//.fontWeight(.semibold) // 权重
//.bold()  // 加粗
//.underline()
//.underline(true, color: Color.red) // 下划线
//.italic() // 倾斜
//.strikethrough(true, color: Color.green) // 删除线
//.font(.system(size: 24, weight: .semibold, design: .serif))// 字体样式
//.baselineOffset(10.0) // 行间隔
//.kerning(10)   // 文字间隔
//.multilineTextAlignment(.leading)// 多行对齐方式
    .foregroundColor(.red) // 颜色
    .frame(width: 200, height: 100, alignment: .center) // 位置
    .minimumScaleFactor(0.1) // 缩小适配 frame 区域

2. Shapes 的使用

// Circle()  // 圆
// Ellipse() // 椭圆
// Rectangle()   // 矩形
RoundedRectangle(cornerRadius:10) // 圆角矩形
// Capsule(style: .circular) // 胶囊
//.fill(Color.green)      // 填充颜色
//.foregroundColor(.pink) // 设置颜色
//.stroke()               // 描边
//.stroke(Color.red)      // 描边颜色
//.stroke(Color.blue, lineWidth: 2.0) // 描边颜色和线宽
//.stroke(Color.orange, style: StrokeStyle(lineWidth: 30, lineCap: .round,  dash: [30])) // 描边颜色和样式
//.trim(from: 0.4, to: 1.0)// 裁剪/修剪
//.stroke(Color.purple, lineWidth: 50) // 描边颜色和线宽
    .frame(width: 300, height: 200) // 宽高

3. Colors 的使用

3.1 实现

RoundedRectangle(cornerRadius: 25.0) // 圆角矩形
    .fill(
        // Color.primary
        // Color(UIColor.secondarySystemBackground)
        Color("CustomColor")
    ) // 填充颜色
    .frame(width: 300, height: 200) // 设置宽高
//.shadow(radius: 10) // 周围阴影
    .shadow(color: Color("CustomColor").opacity(0.3), radius: 10, x: -20, y: -20) // 自定义阴影