Text và Image

1. Text

Cú pháp cơ bản

Text("Hello, SwiftUI!")

Font và Style

Text("Title")
    .font(.largeTitle)

Text("Headline")
    .font(.headline)

Text("Body text")
    .font(.body)

Text("Caption")
    .font(.caption)

// Custom font
Text("Custom")
    .font(.system(size: 24, weight: .bold, design: .rounded))

Text("SF Mono")
    .font(.system(.body, design: .monospaced))

Text Modifiers

Text("Styled Text")
    .font(.title)
    .fontWeight(.bold)
    .foregroundColor(.blue)
    .italic()
    .underline()
    .strikethrough()

Multiline Text

Text("This is a very long text that will wrap to multiple lines automatically in SwiftUI")
    .lineLimit(3)          // Giới hạn số dòng
    .truncationMode(.tail) // Cắt ở cuối
    .multilineTextAlignment(.center)

Text với Formatting

// Date
Text(Date(), style: .date)
Text(Date(), style: .time)
Text(Date(), format: .dateTime.day().month().year())

// Number
Text(42.5, format: .number.precision(.fractionLength(2)))
Text(1234.56, format: .currency(code: "USD"))

// Attributed String
Text("Hello ") + Text("World").bold().foregroundColor(.red)

Markdown Support

Text("This is **bold** and this is *italic*")
Text("Click [here](https://apple.com)")
Text("Code: `print()`")

---

2. Image

Image từ Assets

Image("photo")  // Tên trong Assets.xcassets
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)

SF Symbols

Image(systemName: "heart.fill")
    .font(.largeTitle)
    .foregroundColor(.red)

Image(systemName: "star.fill")
    .imageScale(.large)
    .symbolRenderingMode(.multicolor)

Image Modifiers

Image("landscape")
    .resizable()                    // Cho phép resize
    .aspectRatio(contentMode: .fill) // fill hoặc fit
    .frame(width: 300, height: 200)
    .clipped()                      // Cắt phần thừa
    .cornerRadius(16)

Scaling Modes

// Fit: giữ tỷ lệ, fit trong frame
Image("photo")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)

// Fill: giữ tỷ lệ, fill hết frame
Image("photo")
    .resizable()
    .scaledToFill()
    .frame(width: 200, height: 200)
    .clipped()

Circular Image

Image("avatar")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 100, height: 100)
    .clipShape(Circle())
    .overlay(Circle().stroke(.white, lineWidth: 4))
    .shadow(radius: 10)

AsyncImage (iOS 15+)

AsyncImage(url: URL(string: "https://example.com/image.jpg")) { phase in
    switch phase {
    case .empty:
        ProgressView()
    case .success(let image):
        image
            .resizable()
            .aspectRatio(contentMode: .fit)
    case .failure:
        Image(systemName: "photo")
            .foregroundColor(.gray)
    @unknown default:
        EmptyView()
    }
}
.frame(width: 200, height: 200)

---

3. Kết hợp Text và Image

Label

Label("Favorites", systemImage: "heart.fill")

Label {
    Text("Custom Label")
        .font(.headline)
} icon: {
    Image(systemName: "star")
        .foregroundColor(.yellow)
}

HStack với Icon

HStack {
    Image(systemName: "person.circle.fill")
        .font(.title)
        .foregroundColor(.blue)

    VStack(alignment: .leading) {
        Text("John Doe")
            .font(.headline)
        Text("[email protected]")
            .font(.caption)
            .foregroundColor(.gray)
    }
}

---

📝 Tóm tắt

View	Mục đích
Text	Hiển thị văn bản
Image	Hiển thị hình ảnh
Label	Kết hợp text và icon

Text modifiers: .font(), .foregroundColor(), .bold(), .italic()

Image modifiers: .resizable(), .aspectRatio(), .frame(), .clipShape()