苹果是如何在这个模式中创建导航视图的？

Question

在 iOS 设置 >音乐> Apple Music 和隐私，有一个模式我基本上已经成功复制了，除了两种方式（Apple 模式的简短演示是 此处）。首先，我不知道如何复制文本开头的要点。其次，我不知道如何隐藏导航栏标题，直到滚动经过徽标和模式标题。该行为与 .inline 导航标题样式匹配，并表明徽标和标题实际上是导航栏标题的一部分。

此处的答案实际上非常有帮助让导航栏显示出来。我还尝试使用 此处 将图像添加到工具栏，但这并没有给出所需的结果。我尝试添加填充，因为图像被压缩到导航栏中，但这不起作用。最后，我尝试在 .principal 位置中使用 VStack 在其下方添加图像和文本，但这也不起作用。

这是父视图中的代码：

struct ModalNavBar: View {
    @State private var showApplePolicy = false
    
    var body: some View {
        Button() {
            showApplePolicy = true
        } label: {
            Text("Apple Music and Privacy")
        }.sheet(isPresented: $showApplePolicy, content: {
            NavigationView {
                TermsAndPrivacyView()
                    .navigationTitle("Apple Music & Privacy")
                    .navigationBarTitleDisplayMode(.inline)
                    .toolbar {
                        ToolbarItem(placement: .principal) {
                            VStack {
                                Image("privacy")
                                    .resizable()
                                    .frame(width: 80, height: 65)
                                    .padding()
                                    .padding(.vertical, 20)
                                Text("Apple Music & Privacy")
                            }
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button(action: {
                                self.showApplePolicy = false
                            }) {
                                Text("Done").bold()
                            }
                        }
                    }
            }
        })
    }
}

和模态视图：

struct TermsAndPrivacyView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .center, spacing: 20) {
                Group {
                    Image("privacy")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 80, height: 65)
                        .padding()
                        .padding(.top, 20)
                        .padding(.bottom, 5)
                    Text("Apple Music & Privacy")
                        .font(.title).bold().padding(.top, -20)
                    VStack(alignment: .center) {
                        Text("Apple Music is designed to protect your information and enable you to choose what you share.")
                    }
                }
            }.padding(.horizontal, 30)
        }
    }
}

任何有关导航栏的帮助将不胜感激。

Answer 1

首先，这个问题应该分成多个问题。通常情况下，这会让问题结束，但这里人们只是否决了这一点。请务必阅读我在第一条评论中放置的链接，以解答将来的问题。您的问题是：

1. 如何将两个文本或图像相邻放置并对齐？
2. 当某个视图完全隐藏在导航栏后面时，如何隐藏和显示 .navigationTitle？

在回答第一个问题时，我混合使用了 .firstTextBaseline 对齐方式和 .alignmentGuide 将文本项目符号放在正确的位置。虽然我对这些值进行了硬编码，但如果情况可能发生变化，请尽量避免使用它。在这种情况下，视图不变，因此可以接受。

至于隐藏和显示标题，我使用 PreferenceKey 读取 Text("Apple Music & Privacy") 视图底部的位置 <代码>滚动视图。当该值为零时，该视图位于导航栏后面。然后，我只需设置一个 @State 变量即可在发生这种情况时进行切换，并使用它来设置标题。

您还会注意到我将 ModalNavBar 中的所有内容都拉出了。在这种情况下，所有内容都应包含在工作表显示的视图中。它工作得更好，并且封装了一些东西，因此您只需将不同的视图放入工作表中，它仍然可以正常工作。

最后，我省略了一些文本视图以保持答案简短。请随意将它们添加回来。当您看到省略号时，这仅意味着省略了代码。

struct ModalNavBar: View {
    @State private var showApplePolicy = false
    
    var body: some View {
        Button() {
            showApplePolicy = true
        } label: {
            Text("Apple Music & Privacy")
        }.sheet(isPresented: $showApplePolicy, content: {
            NavigationView {
                TermsAndPrivacyView()
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button(action: {
                                self.showApplePolicy = false
                            }) {
                                Text("Done").bold()
                            }
                        }
                    }
            }
        })
    }
}

struct TermsAndPrivacyView: View {
    @State var showTitle = false
    var body: some View {
        ScrollView {
            VStack(alignment: .center, spacing: 20) {
                Image(systemName: "person.3.fill")
                    .font(.system(size: 80))
                Text("Apple Music & Privacy")
                    .font(.title).bold()
                    // The PreferenceKey reads where it is within the ScrollView. "Scroll" is a coordinate space name
                    // set on the ScrollView. .maxY is simply the value of the Y dimension at the bottom of that view
                    // within the coordinates of the ScrollView. When that hits zero, it is behind the navigation bar.
                    .background(
                        GeometryReader {
                            Color.clear.preference(key: TextLocationPrefKey.self,
                                                   value: $0.frame(in: .named("Scroll")).maxY)
                        }
                    )
                Text("Apple Music is designed to protect your information and enable you to choose what you share.")
                // Put the text bullet and text together in an HStack with a .firstTextBaseline alignement
                HStack(alignment: .firstTextBaseline) {
                    Text(Image(systemName: "circle.fill"))
                        .font(.system(size: 4))
                        .opacity(0.5)
                        // The .alignmentGuide let's you tweak the actual alignment. In this case I moved it up by 2.
                        .alignmentGuide(.firstTextBaseline) { context in
                            context.height + 2
                        }
                    Text("Lorem ipsum dolor sit amet, praesent necessitatibus ei has, te sit hinc munere, ea vix fugit novum noluisse. Nulla graeci delicatissimi qui cu, nec doming iudicabit ex, indoctum partiendo an has. In qui sensibus dissentiunt, inani iudico accusamus ei eum. Suas vidit primis vel ad, meis ignota postea at pri, ei usu consul evertitur. Per vocent sadipscing et. Has debitis deterruisset ei, democritum scribentur te duo, purto accommodare id ius.")
                }

                     ...                

            }.padding(.horizontal, 30)
        }
        // This is a simple ternary condition. If showTitle is true the title is set to "Apple Music & Privacy" else ""
        .navigationTitle(showTitle ? "Apple Music & Privacy" : "")
        .navigationBarTitleDisplayMode(.inline)
        // This is where the PreferenceKey value is compared to zero to set the showTitle variable.
        .onPreferenceChange(TextLocationPrefKey.self) { textLocation in
            withAnimation(.easeIn(duration: 0.15)) {
                showTitle = !(textLocation > 0)
            }
        }
        // This is where you select and name the view for the coordinate space
        .coordinateSpace(name: "Scroll")
    }
}

// This is how the preference key is set up.
fileprivate struct TextLocationPrefKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue = CGFloat.zero
    static func reduce(value: inout Value, nextValue: () -> Value) {
        // This adds or subtracts based on the change in the value as you scroll the view towards the navigation
        // bar, nextValue() is negative, reducing value towards zero.
        value += nextValue()
    }
}