如何使用 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 将其置于所有视图下方。

结果:

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

How do I replicate the rough looking notes app background with SwiftUI?

ios

swift

swiftui