SwiftUI基础组件之Text和Button详解

原创

已于 2025-02-17 17:00:20 修改 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#swiftui #ios #text #button

于 2025-02-17 16:52:50 首次发布

文章目录

一、Text

1.1 简介

SwiftUI 中的 Text 组件用于在界面上显示文本。它是一个功能强大且灵活的组件，可以通过多种方式进行自定义。下面是 Text 组件的一些常用属性及其代码示例：

1.2 基本使用

import SwiftUI

struct ContentView: View {
   
   
    var body: some View {
   
   
        Text("Hello, SwiftUI!")
    }
}

1.2 常用属性

1.2.1 字体（Font）

使用 .font() 来设置文本的字体和大小。

Text("Hello, SwiftUI!")
    .font(.largeTitle)
    .font(.system(size: 24)) // 自定义字体大小 24

其他可用的字体样式包括.title, .headline, .body, .caption等。

1.2.2 字体重量（Font Weight）

使用.fontWeight()可以设置字体的粗细。

Text("Bold Text")
    .fontWeight(.bold)
    .font(.system(size: 24, weight: .medium)) // 使用 .medium 作为示例

1.2.3 字体颜色（Foreground Color）

使用.foregroundColor()改变文本颜色。

Text("Colored Text")
    .foregroundColor(.blue) // 预定义颜色
    .foregroundColor(Color(red: 0.8, green: 0.5, blue: 1.0)) // 自定义淡紫色

如果设计图中的颜色值是以十六进制表示的，例如 #e5e5e5，你可以使用 SwiftUI 的Color结构体来创建这个颜色，如下：

import SwiftUI

extension Color {
   
   
    init(hex: String) {
   
   
        let scanner = Scanner(string: hex)
        scanner.currentIndex = hex.startIndex
        
        var rgbValue: UInt64 = 0
        scanner.scanHexInt64(&rgbValue)
        
        let red = Double((rgbValue & 0xFF0000) >> 16) / 255.0
        let green = Double((rgbValue & 0x00FF00) >> 8) / 255.0
        let blue = Double(rgbValue & 0x0000FF) / 255.0
        
        self.init(red: red, green: green, blue: blue)
    }
}