如何使用 SwiftUI 复制粗糙的笔记应用程序背景？

Question

如果您查看Notes.app ，您可以看到视图背景不是平坦的，并且它具有粗糙的纹理，我想为我正在使用 SwiftUI 的应用程序复制它，但我没有知道我会怎么做。

Answer 1

这是我的纹理视图：

struct RoughTextureView: View {
    var body: some View {
        Image("texture")
            // Note: a resizable Image will fill its superview
            .resizable(capInsets: EdgeInsets(), resizingMode: .tile)
    }
}

... texture是这张50x50图像：

以下是如何使用它：

struct ContentView: View {

    var body: some View {
        NavigationView {
            ZStack {
                RoughTextureView()
                    //...so it goes underneath the navigation bar
                    .edgesIgnoringSafeArea(.top)
                ScrollView {
                    ForEach(0...100) { noteNumber in
                        HStack {
                            Text("Awesome note #\(noteNumber)")
                                .frame(height: 20)
                                .padding()
                        }
                    }
                }
                //...so it doesn't overlap with the navigation bar
                .offset(x: 0, y: 20)
            }
            .navigationBarTitle(Text("My Notes").font(.largeTitle))
        }
    }

}

使用ZStack将其放在所有视图下方。

结果：