使用 SwiftUI 在 WatchOS 中适配 UI答案

【问题标题】：Fit UI in WatchOS using SwiftUI使用 SwiftUI 在 WatchOS 中适配 UI
【发布时间】：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 元素？

【问题讨论】：

标签： swiftui watchos

【解决方案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)

     }
}

【讨论】：