【SwiftUI】吹き出しを簡単につくる

吹き出しを作ります。

struct SpeechBubble: View {
  var count: Int

  var body: some View {
    HStack(spacing: 0) {
      Rectangle()
        .fill(.red)
        .rotationEffect(.degrees(45))
        .frame(width: 20, height: 20)
        .offset(x: 14)
        .clipShape(.rect) // *
      HStack {
        Image(systemName: "heart.fill")
        Text("\(count)")
      }
      .foregroundStyle(.background)
      .padding()
      .background(.red, in: .rect(cornerRadius: 8))
    }
  }
}

#Preview("bubble") {
  SpeechBubble(count: 999)
}

良い感じです。

トランジションを付けるとそれなりになりました。

意外と簡単につくれるものなんですね。

SwiftUI てすごい。

🧑🏻‍💻 参考