使用 SwiftUI 在 WatchOS 中适配 UI

Posted 2023-02-23

【中文标题】使用 SwiftUI 在 WatchOS 中适配 UI

【英文标题】：Fit UI in WatchOS using SwiftUI

【发布时间】：2019-08-16 13:49:59

【问题描述】：

我正在努力掌握如何使用 SwiftUI 为 Watch App 构建合适的 UI

我所说的拟合是指我想创建一个无需滚动即可显示一些信息的屏幕。

UI 应该适应屏幕大小并适合 UI 元素，我还希望能够在空间不足时删除低优先级的 UI 元素。

我尝试创建一个文本元素的示例 VStack，然后使用 layoutPriority(...) 和 .minimumScaleFactor(...) 等属性让内容适合容器，但没有运气。

给出以下代码。我在屏幕上看到的结果是一个溢出可用空间的大文本列表。不管我使用什么layoutPriority(...) /.minimumScaleFactor(...) 方法组合

struct ContentView: View 
    var body: some View 
        VStack() 
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
        
    

结果是：

在 swiftUI 中有没有办法构建一个合适的 UI，可以缩放内容以适应可用空间，而不仅仅是中继包含的 View 想要使用的空间？如果可用空间不够，还有没有办法删除 UI 元素？

【参考方案1】：

使用GeometryReader，您可以获得与其父布局相比灵活的首选尺寸。

这个视图返回一个灵活的首选尺寸给它的父布局。

struct ContentView: View 

    var arr = ["Hello World 1",
               "Hello World 2",
               "Hello World 3",
               "Hello World 4",
               "Hello World 5",
               "Hello World 6",
               "Hello World 7",
               "Hello World 8",
               "Hello World 9"]

    var body: some View 
        GeometryReader  geometry in
                VStack(alignment: .leading) 
                    Group 
                        ForEach(self.arr, id:\.self) text in
                                Text(text)
                         
                        .lineLimit(nil)
                        .frame(height: geometry.size.height/CGFloat(self.arr.count))
                        .font(.custom("HelvaticaNeue", size: 20.0))
                 
             .edgesIgnoringSafeArea(.bottom)