SwiftUI基础控件(1)-Text.md

Text 是 SwiftUI 中最基础的文本显示组件。它可以直接接收一个字符串或字符串插值，并将其渲染为视图。用于显示基本的文本字符串。

1、文本展示

基本用法：

Text("Hello, World!")

常见修饰符

字体：

• .font(.title) 设置文本字体为标题样式。
• .font(.body) 设置文本字体为主体样式。
• .font(.caption) 设置文本字体为脚注样式。
• .font(.largeTitle) 设置文本字体为大标题样式。
• .font(.system(size: 20)) 设置文本字体为系统字体，并指定大小。
• .font(Font.custom("FontName", size: 16)) 使用自定义字体
• .font(.system(size: 20, weight: .bold)) 设置文本字体大小并加粗。
• 文字加粗显示也可以：

Text("Hello, World!")
   .font(.system(size: 20))
   .bold()

颜色：

• .foregroundColor(.red) 设置文本颜色为红色。
• .foregroundColor(Color(red: 0.5, green: 0.5, blue: 0.5)) 使用 RGB 值设置文本颜色。
• .foregroundColor(Color("MyColor")) 使用资产库中的颜色。

对齐方式：

• .multilineTextAlignment(.center) 设置多行文本的对齐方式为居中。
• .multilineTextAlignment(.leading) 设置多行文本的对齐方式为左对齐（或开头对齐）。
• .multilineTextAlignment(.trailing) 设置多行文本的对齐方式为右对齐（或末尾对齐）。

间距和布局

• .padding(): 在文本周围添加内边距。
• .frame(width: 100, height: 50): 设置文本的宽度和高度。
• .background(Color.blue): 设置文本的背景颜色。
• .border(Color.gray, width: 1): 为文本添加边框。

其他修饰符：

• .lineLimit(1): 设置文本的最大行数。
• .truncationMode(.end): 设置文本截断的方式。
• .offset(x: 10, y: 20): 偏移文本的位置。
• .rotationEffect(Angle(degrees: 45)): 旋转文本。
• .shadow(color: .black, radius: 2, x: 0, y: 2): 为文本添加阴影效果。
• .opacity(0.5): 设置文本的透明度。
• .animation(...): 为文本的变化添加动画效果。

圆角处理

• Text设置背景色及圆角

  Text("Hello, SwiftUI!")
      .font(.title)
      .foregroundColor(.white) // 设置文本颜色为白色
      .padding() // 为文本添加一些内边距
      .background(
          RoundedRectangle(cornerRadius: 10) // 设置圆角半径
             .fill(Color.blue) // 设置背景颜色为蓝色
      )

• Text设置边框颜色及圆角

        Text("Hello, SwiftUI!")
  .font(.title)
  .foregroundColor(.red) // 设置文本颜色
  .padding(10) // 可选，为文本添加内边距，以便边框效果更明显
  .background(
      RoundedRectangle(cornerRadius: 10) // 设置圆角大小
          .stroke(Color.blue, lineWidth: 1) // 设置边框颜色和宽度
  )

2、富文本展示：

1、+号拼接

//1、 拼接不同样式的文本
Text("这")
  .foregroundColor(.red)
  .font(.title) +
Text("是").foregroundColor(.blue) +
Text("一段").foregroundColor(.gray) +
Text("富文本").foregroundColor(.green)
  .font(.headline)
  .underline()

//2、字符串穿插实现图文混排
Text("Hello ")
  .foregroundColor(.blue)
+ Text("系统图片 \(Image(systemName: "swift")) ")
    .foregroundColor(.orange)
+ Text("本地图片 \(Image("sex_male")) ")
    .foregroundColor(.orange)

2、简单HTML字符串展示

对于简单的html格式，你也可以尝试将 HTML 转换为 NSAttributedString，然后再桥接转换为 SwiftUI 可用的格式，但这种方法可能不适用于复杂的 HTML 结构。注意：SwiftUI本身不直接支持NSAttributedString，因此我们还需进一步转换。

import SwiftUI
import UIKit

func htmlToAttributedString(_ html: String) -> NSAttributedString? {
    guard let data = html.data(using: .utf8),
          let attributedString = try? NSAttributedString(data: data,
                                                       options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue],
                                                       documentAttributes: nil) else {
        return nil
    }
    return attributedString
}

extension AttributedString {
    init(html: String) {
        self.init(htmlToAttributedString(html) ?? NSAttributedString())
    }
}

struct ContentView: View {
    let simpleHTML = "<b>粗体文字</b>, <i>斜体文字</i>, and <u>下划线文字</u>."
    var body: some View {
        Text(AttributedString(html: simpleHTML))
            .padding()
    }
}

3、 Markdown 支持

Text("**This** ~~is~~ an *example* of **Markdown** `Text`, [More info](https://developer.apple.com/documentation/swiftui/text)")

3、渐变文字

Text("渐变文字从左上到右下渐变，渐变颜色经历[.orange,.yellow,.blue,.purple]")
   .font(.title2)
   .bold()
   .textSelection(.enabled) //长按可复制
   .foregroundStyle(
       LinearGradient(
           colors: [
               .orange,
               .yellow,
               .blue,
               .purple
           ],
           startPoint: .topLeading,
           endPoint: .bottomTrailing
       )
   )