SwiftUI 基础控件2

Muen
315 阅读3分钟

图片 Imange

Image(.example)
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 300)

适应屏幕

Image(.example)
    .resizable()
    .scaledToFit()
    .containerRelativeFrame(.horizontal) { size, axis in
        size * 0.8  // 图像填充屏幕可用宽度的 80%  
    }
  • 控制图像插值

当创建一个 IImage视图，将其内容拉伸到大于其原始大小， 默认情况下，会进行图像插值，这就是 iOS 平滑地混合像素，你甚至可能没有意识到它们已经被拉伸了。

然而，图像插值在一个地方会导致问题，那就是当您处理精确像素时。

Image(.example)
    .resizable()
    .scaledToFit()
    .background(.black)

image.png

由于它的大小可调整，SwiftUI 会将其拉伸以填充所有可用空间。但是仔细观察颜色的边缘：它们看起来参差不齐，但也很模糊。锯齿状部分来自原始图像，因为它的大小只有 66x92 像素，而模糊部分是 SwiftUI 尝试在拉伸时混合像素，以使拉伸不那么明显。

通常这种混合效果很好，但在这里却很困难，因为源图片很小（因此需要大量混合才能以我们想要的尺寸显示），而且因为图像有很多纯色，所以混合像素很突出很明显。

使用修饰符，可以控制 这样的混合像素的处理。.none表示不处理

Image(.example)
    .interpolation(.none)

image.png

步进器 Stepper

image.png

时间选择器 DatePicker

image.png

日期选择器为我们提供了一些控制其工作方式的配置选项。

  • displayedComponents：用来决定用户应该看到什么样的选项
DatePicker("请选择时间", selection: $wakeUp,displayedComponents: .date)
  1. 如果您不提供此参数，用户将看到天、小时和分钟。
  2. 如果您使用.date，将看到月、日和年。
  3. 如果您使用.hourAndMinute，则只能看到小时和分钟。
  • 选择时间范围
DatePicker("请选择", selection: $wakeUp, in: Date.now...)

处理日期

Swift 为我们提供了处理日期的功能，它封装了年、月、日期、小时、分钟、秒、时区等。然而，我们不想考虑其中的大部分内容 。日期的使用，应该依赖苹果的计算和格式化框架

  • DateComponents：它允许我们读取或写入日期的特定部分而不是整个日期。

如：表示今天上午 8 点的日期

var components = DateComponents()
components.hour = 8
components.minute = 0

let date = Calendar.current.date(from: components) ?? .now

我们可以要求 iOS 提供某个日期的特定组件，然后将它们读出来。一个问题是，我们请求的值和我们通过工作方式获得的值之间存在脱节。DateComponents：我们可以请求小时和分钟，但我们将返回一个DateComponents实例，该实例的所有属性都有可选值。

因此，我们可能会编写这样的代码：

let components = Calendar.current.dateComponents([.hour, .minute], from: Date.now)

let hour = components.hour ?? 0
let minute = components.minute ?? 0
  • 如何格式化日期和时间

利用 format：

Text(Date.now, format: .dateTime.hour().minute())  // 想要日期中的时间 

Text(Date.now, format: .dateTime.day().month().year())  // 日月年

Text(Date.now.formatted(date: .long, time: .shortened))

Text(Date.now.formatted(date: .abbreviated, time: .omitted))  

Text(Date.now.formatted())

日期处理很困难，但苹果为我们提供了一堆助手，让日期变得不那么困难。如果您学会很好地使用它们，您将编写更少的代码，并且编写更好的代码！

Bundle

if let fileURL = Bundle.main.url(forResource: "some-file", withExtension: "txt") {

    if let fileContents = try? String(contentsOf: fileURL) {

        // 加载

    }  
}

Sheet

@State private var showingSheet = false  

Button("显示") {
    showingSheet.toggle()
} 
.sheet(isPresented: $showingSheet) {

    // 自定义 视图
}
  • 以编程方式关闭视图

@Environment 它允许我们创建 存储外部提供给我们的值 的属性。

@Environment(\.dismiss) var dismiss

//....

Button("保存") {     
    dismiss()  // 使当前视图退出
}
  • 对比 NavigationLink

两者都允许我们展示当前视图的新视图，但它们的方式不同，您应该仔细选择它们：

  1. NavigationLink用于显示有关用户选择的详细信息，就像您正在深入研究某个主题一样。
  2. sheet()用于显示不相关的内容，例如设置或撰写窗口。

占位图

ContentUnavailableView

image.png

avatar
文章
阅读
粉丝