Question

我想将图像设置为列表的背景，因此我使用this question作为参考并运行了它。（我使用图片而不是渐变）

这是我的代码

import SwiftUI

struct TestContentView: View {

    init() {
        UITableView.appearance().backgroundColor = .clear// Uses UIColor
    }

    var body: some View {
        NavigationView {
            Image("milkyway")
            .resizable()
            .frame(maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)

            .overlay(List {
                ForEach(1...10, id: \.self) { index in
                    NavigationLink( destination: DetailView()) {
                        ContentCell()
                    }
                    .frame(height: 100)
                    .listRowBackground(Color.clear) // Uses Color
                }
            }
            .navigationBarTitle("My List"))

        }
    }
}

struct ContentCell: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("An item to display.")
            }
            .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center)
            .background(Color.clear)// Working
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text ("At the detail view")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(Color.clear)// Working
        .edgesIgnoringSafeArea(.all)
    }
}

struct TestContentView_Previews: PreviewProvider {
    static var previews: some View {
        TestContentView()
    }
}

似乎工作正常。但是，从this picture中可以看到，内容与largeTitle重叠。编辑：（如果您滚动该屏幕，则大标题和内容将重叠。）

它如何工作？

Answer 1

这对我有用：

struct WelcomeScene: View {

    var body: some View {
        NavigationView {
            splashImageBackground
                .overlay(
                    VStack {
                        Text("Content here")
                    }
                    .padding(.horizontal)
                )
        }
    }

    private var splashImageBackground: some View {
        GeometryReader { geometry in
            Image("OnboardingSplash")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
                .frame(width: geometry.size.width)
        }
    }

}

具有列表视图的导航视图的背景图像

1 个答案: