Question

我想使用尺寸类别创建不同的布局，我遵循以下示例：https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-different-layouts-using-size-classes

我扩展了Xcode Master / Detail模板，并如下更改ContentView，使用了两个大小类，然后使用水平大小类来设置依赖于大小类的导航标题。 问题在于导航标题始终显示为“紧凑”。我在这里缺少什么？

struct ContentView: View {
    @Environment(\.managedObjectContext)
    var viewContext   

    @Environment(\.verticalSizeClass) var vSizeClass
    @Environment(\.horizontalSizeClass) var hSizeClass

    var body: some View {
        NavigationView {
            MasterView()
                .navigationBarTitle(Text(hSizeClass == .compact ? "Compact" : "Regular"))
                .navigationBarItems(
                    leading: EditButton(),
                    trailing: Button(
                        action: {
                            withAnimation { Event.create(in: self.viewContext) }
                        }
                    ) { 
                        Image(systemName: "plus")
                    }
                )
            Text("Detail view content goes here")
                .navigationBarTitle(Text("Detail"))
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

Answer 1

我使用此代码进行了自己的测试，对它们进行了简化，并从您的代码进行了一些修改：

struct ContentView: View {
    @Environment(\.managedObjectContext)
    var viewContext

    @Environment(\.verticalSizeClass) var vSizeClass
    @Environment(\.horizontalSizeClass) var hSizeClass

    var body: some View {
        NavigationView {
            Form {
                Section {
                    Text("My Content")
                }
            }
            .navigationBarTitle(Text(hSizeClass == .compact ? "Compact" : "Regular"))
        }
    }
}

测试它会在模拟器中产生预期的结果：

iPhone 8 Plus ：在纵向模式下为 紧凑宽度 ， 常规宽度 在横向模式下

最初，导航标题显示为“紧凑”，但是当手机旋转到横向时，标题会更新，显示为“常规”。

只需确保您使用的设备或模拟器的水平尺寸级别在某些方向上为常规即可。

这是有关此主题的官方文档，如OP的评论中所述。它有一个方便的表格，根据其型号和物理方向列出了设备尺寸类别：

Apple Developer - Human Interface Guidelines: Adaptivity and Layout

祝你好运！

环境大小类别未更新

1 个答案: