Swift 博文

发表于 更新于 分类于

在 SwiftUI 中，使用Text 添加了frame修饰器后文本内容经常出现显示不完整的情况，例如下面的场景：

如果我们希望在指定控件的范围内让文本内容尽可能地显示完整，我们可以给Text添加 minimumScaleFactor修饰器，即设置Text的最小比例因子。它的作用就是指定文本内容能按照设定的font原始尺寸缩小的最小比例，从而让文本内容尽可能的显示完整。例如：

1
2
3
4
5
6
7
8
9
10
VStack(spacing:20) {
         Text("Swift is a powerful and intuitive programming language for all Apple platforms. It’s easy to get started using Swift, with a concise-yet-expressive syntax and modern features you’ll love. Swift code is safe by design and produces software that runs lightning-fast.")
             .font(.headline)
         
         Text("Swift is a powerful and intuitive programming language for all Apple platforms. It’s easy to get started using Swift, with a concise-yet-expressive syntax and modern features you’ll love. Swift code is safe by design and produces software that runs lightning-fast.")
             .font(.headline)
             .minimumScaleFactor(0.5)
     }
     .padding()
     .frame(height: 200)

因为我们给HStack设置了frame，并把高度限制为200，所以在这个高度范围内是无法完整显示两个Text内容的。如果不给最后一个Text设置minimumScaleFator，它展示的效果如下：

设置后的效果如下：

通过前后两种效果的比较我们可以发现，在设置了minimumScaleFactor为 0.5后，后一个Text的字体大小在原来设置的font(.headline)的基础上进行缩小操作。

阅读全文 »

发表于 更新于 分类于

在 SwiftUI 中，我们可以使用Image控件来展示一张图片。

基础使用

在 SwiftUI中，如果我们需要使用Image显示一张图片，首先我们需要先将图片资源拖到蓝色的Assets文件夹中，然后使用图片的文件名加载显示。

1
Image("avatar")

在最新的 Xcode 15.0中，增加了使用下面的方式加载资源文件夹中的图片的特性：

1
Image(.avatar)

上面两种方式的效果是一样的。

阅读全文 »

发表于 更新于 分类于

介绍

在 SwiftUI 中，如果我们想要显示文本内容，可以使用 Text 控件。

使用方式

1
Text("Hello, world!")

常用的属性设置

设置文字的颜色

通过foregroundColor 设置文字的颜色：

1
2
Text("Hello, world!")
     .foregroundColor(.black)

**注意**，在 Xcode 15.0中，Apple 更推荐我们使用下面的方式设置文字的颜色，而且上面的修饰器将会在不久后被移除：

1
2
Text("Hello, world!")
    .foregroundStyle(.black)
阅读全文 »

发表于 更新于 分类于

在 SwiftUI 中，有一个特殊的Picker（选择器），叫做PhotosPicker（相册选择器），使用它可以帮助快速获取手机相册中的照片。

创建一个 PhotosPicker

PhotosPicker本身并不属于 SwiftUI这个模块中，它属于PhotosUI模块，所以我们首先需要在头部导入这个模块：

1
import PhotosUI

使用 @State 定义一个变量用来和PhotosPicker进行绑定：

1
@State var selectedImages: PhotosPickerItem?

创建PhotoPicker：

1
PhotosPicker("选择喜欢的照片", selection: $selectedImages)

此时的效果如下：

注意：上图的效果为 iOS 17 以后的效果。

阅读全文 »

发表于 更新于 分类于

在 SwiftUI 中，Picker可以帮助我们实现一些常见的选择器应用场景。除此之外，SwiftUI 还给我们提供了其他两种常见的选择器，DatePicker（时间选择器）和 ColorPicker （选择器）。

创建一个 DatePicker

DatePicker的创建和Picker创建一样，需要使用@State定义一个类型为Date的动态变量，然后将这个动态变量和DatePicker进行绑定：

1
@State var selectedOptions:Date = Date()
1
DatePicker("选择日期", selection: $selectedOptions)

默认情况下的效果如下：

阅读全文 »

发表于 更新于 分类于

在 SwiftUI 中，除了常见的Picker和DatePicker ，还有一个ColorPicker（颜色选择器），它在我们需要进行颜色选择时非常有用。

创建一个颜色选择器

首先，使用@State创建一个Color类型的变量作为ColorPicker选中绑定值：

1
@State var selectedOptions:Color = .red

创建ColorPicker：

1
2
3
ColorPicker(selection: $selectedOptions, label: {
            Text("选择你最喜欢的颜色")
           })

运行项目，点击的效果如下：

阅读全文 »

发表于 更新于 分类于

在我们做一些信息表单填写时，经常需要用到选择器（Picker）。

创建 Picker

1
2
3
4
5
6
7
8
9
Picker("今天周几",  selection: $selectedOptions) {
    Text("星期一")
    Text("星期二")
    Text("星期三")
    Text("星期四")
    Text("星期五")
    Text("星期六")
    Text("星期天")
}

使用@State创建一个动态响应的变量，用于和Picker进行绑定，当选中某一项时，这个变量对应的值也会发生变化。

1
@State var selectedOptions:Int =  0

此时默认的效果如下：

但是如果我们此时选择任意一个其他的选项，发现并没有什么变化，而且控制台会输入下面的信息：

Picker: the selection “0” is invalid and does not have an associated tag, this will give undefined results.

阅读全文 »

发表于 更新于 分类于

在 SwiftUI 中，NavigationStack 用来作为一个根视图（root view）使得我们能够将一个新的视图展示在这个根视图上。

创建一个带导航栏和标题的app

1
2
3
4
5
6
7
8
9
10
11
12
struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(0..<10,id: \.self) { index in
                    Text("当前行\(index)")
                }
            }
            .navigationTitle("导航栏标题")
        }
    }
}
阅读全文 »

发表于 更新于 分类于

实现快速滚动到顶部或底部的效果

在很多的ScrollView 的应用中，我们经常见到点击“回到顶部”按钮实现快速回到顶部的效果。

在 SwiftUI中，如果我们想要实现这样的效果，我们可以使用ScrollViewRader和ScrollView来实现。ScrollViewRader可以让我们通过编程的方式实现滚动到一个已知的子视图的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

struct ContentView: View {
    @Namespace var topID
    @Namespace var bottomID
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                // 顶部的按钮
                Button {
                    withAnimation {
                        proxy.scrollTo(bottomID)
                    }
                } label: {
                    Text("滚动到底部")
                }
                .id(topID)
                
                // 滚动视图
                VStack(spacing: 0.1) {
                    ForEach(0..<100) {i in
                        color(fraction: Double(i) / 100)
                            .frame(height: 32)
                    }
                }
                // 顶部的按钮
                Button(action: {
                    withAnimation {
                        proxy.scrollTo(topID)
                    }
                }, label: {
                    Text("滚动到顶部")
                    
                })
                .id(bottomID)
            }
        }
    }
    
    // 创建颜色
    func color(fraction: Double) -> Color {
        Color(red: fraction, green: 1 - fraction, blue: 0.5)
    }
}
阅读全文 »

发表于 更新于 分类于

在 SwiftUI 中，TextField 用来展示和接收用户编辑的文本内容。

使用

在创建一个TextField之前，需要先定义一个响应式类型的状态变量：

1
@State private var userName:String = ""

在创建TextField 时，使用$userName 的形式绑定这个状态变量：

1
TextField("User Name",text: $userName)

当userName 这个变量和TextField 绑定后，当我们在输入框中输入或者删除内容时，userName 对应的值也会跟着发生变化。

阅读全文 »
0%