Question

我是swiftui的新手，正在为一些基本内容而苦苦挣扎我正在尝试在底部的2个按钮上创建一个视图。我想要一张图片作为整个视图的背景。

var body: some View {
        ZStack {
            Image("bg-welcome").edgesIgnoringSafeArea(.all)
        }
    }

这很好我这样设定观点

NavigationView {
            ZStack {

                VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                    Text("1").foregroundColor(.white)
                    Text("2").foregroundColor(.white)
                    Spacer()
                    Button(action: {}){
                        Text("ooooooooo")
                    }
                }.background(Image("bg-welcome"))
            }

        }

现在我有2个问题： -在背景图片之前显示空白 -第一个文本肯定会在导航栏保留的空格之后被压入下面，我不想要它，因为当我导航到下一个屏幕时，该空格仍被占用，我想拥有整个可用的屏幕

感谢您的帮助

Answer 1

尝试一下：

var body: some View {
        NavigationView {
            ZStack {

                VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                    Text("1").foregroundColor(.white)
                    Text("2").foregroundColor(.white)
                    Spacer()
                    Button(action: {}){
                        Text("Button 1")
                    }
                    Button(action: {}){
                        Text("Button 2")
                    }
                }.background(Image("remachine_poster")
                    .resizable()
                    .aspectRatio(contentMode: .fill)).edgesIgnoringSafeArea(.all)
            }
        }
    }

Answer 2

您可以在按钮上添加填充。...

NavigationView {
            ZStack {

                VStack() {

                    Text("1").foregroundColor(.green).padding(.top, 40)
                        Text("2").foregroundColor(.green)
                        Spacer()
                        Button(action: {}){
                            Text("Button 1")
                        }.foregroundColor(Color.red)

                        Button(action: {}){
                            Text("Button 2")
                        }.foregroundColor(Color.red)

                }
            }.background(Image("remachine_poster")
            .resizable()
            .aspectRatio(contentMode: .fill))
                .edgesIgnoringSafeArea(.vertical)
        }

Answer 3

我最终做了这样的事情。请让我知道是否有更好的方法

ng build --prod --source-map=true

以全屏图像和导航查看

3 个答案: