在 SwiftUI 中用 Text 实现图文混排

struct TempView:View{
    let str = "道可道，非常道；名可名，非常名。"
    var body: some View{
        HStack{
            Text(str)
        }
        .padding()
    }
}

HStack{
    let a = Text(str)
    let b = Text(str)
    let c = Text(str)
    Text("\(a) \(b) \(c)") 
}

HStack{
    let a = Text(str)
    let b = Text(str)
    let c = Text(str)
    a + b + c
}

HStack{
    let a = Text(str)
        .foregroundColor(.red) // Text 专用版本，不改变 Text 类型
        .underline() // 不改变 Text 类型
//      .background(Color.yellow) // background 是针对 View 协议的修饰器，会改变 Text 的类型，无法使用
    let b = Text(str)
        .foregroundColor(.blue)
        .font(.title)
    let c = Text(str)
        .foregroundColor(.green)
        .bold()
    a + b + c
}

@resultBuilder
enum TextBuilder {
    static func buildBlock(_ components: Text...) -> Text {
        components.reduce(Text(""),+)
    }
}

@TextBuilder
func textBuilder() -> Text {
    Text(str)
        .foregroundColor(.red)
        .underline()
    Text(str)
        .foregroundColor(.blue)
        .font(.title)
    Text(str)
        .foregroundColor(.green)
        .bold()
}

Image(systemName: "ladybug")
    .symbolRenderingMode(.multicolor) // 指定渲染模式，Image 专用修饰器 ，Image 类型不发生改变
    .symbolVariant(.fill) // 设置变体 ，该修饰器适用于 View 协议，Image 类型发生了改变
    .font(.largeTitle) // 适用于 View 的修饰器，非 Text 专用版本

let bug = Image(systemName: "ladybug.fill") // 由于 symbolVariant 会改变 Image 的类型，因此我们采用直接在名称中添加变体的方式来保持类型的稳定
    .symbolRenderingMode(.multicolor) // 指定渲染模式，Image 专用修饰器 ，Image 类型不发生改变
let bugText = Text(bug)
    .font(.largeTitle) // Text 专用版本，Text 类型不发生变化

// 通过插值的方式
Text("Hello \(bug)") // 在插值中使用 Image 类型，由于 font 会改变 Image 的类型，因此无法单独修改 bug 的大小

Text("Hello \(bugText)") // 在插值中使用 Text，font（ Text 专用修饰器 ）不会改变 Text 类型，因此可以单独调整 bug 的大小

// 使用加法运算符
Text("Hello ") + bugText 

struct SymbolInTextView: View {
    @State private var value: Double = 0
    private let message = Image(systemName: "message.badge.filled.fill") // 􁋭
        .renderingMode(.original)
    private let wifi = Image(systemName: "wifi") // 􀙇
    private var animatableWifi: Image {
        Image(systemName: "wifi", variableValue: value)
    }

    var body: some View {
        VStack(spacing:50) {
            VStack {
                Text(message).font(.title) + Text("文字与 SF Symbols 混排。\(wifi) Text 会将插值图片视作文字的一部分。") + Text(animatableWifi).foregroundColor(.blue)
            }
        }
        .task(changeVariableValue)
        .frame(width:300)
    }

    @Sendable
    func changeVariableValue() async {
        while !Task.isCancelled {
            if value >= 1 { value = 0 }
            try? await Task.sleep(nanoseconds: 1000000000)
            value += 0.25
        }
    }
}

VStack {
    let logo = Image("logo")  // logo 是一个 80 x 28 尺寸的图片，默认情况下，title 的高度为 28

    Text("欢迎访问 \(logo) ！")
        .font(.title)

    Text("欢迎访问 \(logo) ！")
        .font(.body)
}

let logo = Text(Image("logo")).baselineOffset(-3) // Text 版本的修饰器，不会改变 Text 类型，使用 alignmentGuide 进行修改会更改类型

Text("欢迎访问 \(logo) ！")
    .font(.title)

Text("欢迎访问 \(logo) ！")
    .font(.title)  // title 在不同动态模式下，显示的尺寸不同。

@ScaledMetric(relativeTo: .body) var imageSize = 17 

struct TempView: View {
    @ScaledMetric(relativeTo:.body) var height = 17 // body 的默认高度
    var body: some View {
        VStack {
            Image("logo")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height:height)

            Text("欢迎访问！")
                .font(.body)
        }
        .padding()
    }
}

VStack(alignment: .leading, spacing: 50) {
            TitleWithImage(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197", fontStyle: .body, tagName: "JD_Tag")

            TitleWithImage(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197", fontStyle: .body, tagName: "JD_Tag")
                .environment(\.sizeCategory, .extraExtraExtraLarge)
        }

extension UIImage {
    func resized(to size: CGSize) -> UIImage {
        return UIGraphicsImageRenderer(size: size).image { _ in
            draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

let uiFont = UIFont.preferredFont(forTextStyle: fontStyle)
pointSize = uiFont.pointSize
textStyle = Font.TextStyle.convert(from: fontStyle)
_fontSize = ScaledMetric(wrappedValue: pointSize, relativeTo: textStyle)

@Sendable
func resizeImage() async {
    if var image = UIImage(named: tagName) {
        let aspectRatio = image.size.width / image.size.height
        let newSize = CGSize(width: aspectRatio * fontSize, height: fontSize)
        image = image.resized(to: newSize)
        tagImage = Image(uiImage: image)
    }
}

.task(id: fontSize, resizeImage)

TitleWithOverlay(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197", tag: "京东超市", fontStyle: .body)

TitleWithOverlay(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197", tag: "京东超市", fontStyle: .body)
    .environment(\.sizeCategory, .extraExtraExtraLarge)

Text(tag)
    .font(.custom("", fixedSize: fontSize))

TagView(tag: tag, textStyle: textStyle, fontSize: fontSize - 6, horizontalPadding: 5.5, verticalPadding: 2)
    .alignmentGuide(.top, computeValue: { $0[.top] - fontSize / 18 })

Color.clear
    .task(id:fontSize) { // 使用 task(id:)
        tagSize = proxy.size
    }

.task(id: tagSize, createPlaceHolder)

extension UIImage {
    @Sendable
    static func solidImageGenerator(_ color: UIColor, size: CGSize) async -> UIImage {
        let format = UIGraphicsImageRendererFormat()
        let image = UIGraphicsImageRenderer(size: size, format: format).image { rendererContext in
            color.setFill()
            rendererContext.fill(CGRect(origin: .zero, size: size))
        }
        return image
    }
}

@Sendable
func createPlaceHolder() async {
    let size = CGSize(width: tagSize.width, height: 1) // 仅需横向占位，高度够用就行
    let uiImage = await UIImage.solidImageGenerator(.clear, size: size)
    let image = Image(uiImage: uiImage)
    placeHolder = Text(image)
}

TitleWithDynamicImage(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197", tag: "京东超市", fontStyle: .body)

TitleWithDynamicImage(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197", tag: "京东超市", fontStyle: .body)
    .environment(\.sizeCategory, .extraExtraExtraLarge)

@Sendable
func createImage() async {
    let tagView = TagView(tag: tag, textStyle: textStyle, fontSize: fontSize - 6, horizontalPadding: 5.5, verticalPadding: 2)
    tagView.generateSnapshot(snapshot: $tagImage)
}

func generateSnapshot(snapshot: Binding<Image>) {
    Task {
        let renderer = await ImageRenderer(content: self)
        await MainActor.run {
            renderer.scale = UIScreen.main.scale // 设置正确的 scale 值
        }
        if let image = await renderer.uiImage {
            snapshot.wrappedValue = Image(uiImage: image)
        }
    }
}

struct TagAttribute: TextAttribute {}

struct TagEffect: TextRenderer {
  let tagBackgroundColor: Color

  func draw(layout: Text.Layout, in context: inout GraphicsContext) {
    for run in layout.flattenedRuns {
      if run[TagAttribute.self] != nil {
        let rect = run.typographicBounds.rect
        let copy = context
        // 绘制 tag 的背景
        let shape = RoundedRectangle(cornerRadius: 5).path(in: rect)
        copy.fill(shape, with: .color(tagBackgroundColor))
      }
      context.draw(run)
    }
  }
}

struct TagEffectDemo: View {
  let tagCount: Int
  let tag: LocalizedStringResource
  let title: LocalizedStringResource
  let fontSize: CGFloat
  let tagBackgroundColor: Color
  let tagFontColor: Color
  var body: some View {
    let tagPlaceHolderText = Text(" \(tag) ")
      .monospaced()
      .font(.system(size: fontSize, weight: .heavy))
      .foregroundStyle(tagFontColor)
      .customAttribute(TagAttribute())

    Text("\(tagPlaceHolderText) \(title)")
      .font(.system(size: fontSize))
      .textRenderer(
        TagEffect(
          tagBackgroundColor: tagBackgroundColor
        )
      )
  }
}

#Preview {
  TagEffectDemo(
    tagCount: 6,
    tag: .init("JOIN"),
    title: .init("Get weekly handpicked updates on Swift and SwiftUI!"),
    fontSize: 16,
    tagBackgroundColor: .red,
    tagFontColor: .white
  )
  .frame(width: 160)
}