SwiftUI：拉伸背景图像以填充

Question

这是关于用颜色填充背景。

我正在构建 this project 的 SwiftUI 版本。这是一个选项卡式应用程序（测试工具）。

This is my Working Project

我要做的第一件事是设置选项卡。我希望能学到很多东西，并遇到很多困难。

第一面墙，是我用（可怕的）有毒的绿色背景渐变填充应用程序背景。

这是我水平拉伸的条纹形式。

有了 IB，这不是问题。

使用 SwiftUI，我需要弄清楚。

这是我目前的代码：

import SwiftUI

struct RVS_SpinnerSwiftUI_Tabbed_Test_Harness_ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabbedView(selection: $selection, content: {
            VStack {
                Text("TEST 0")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Simple Center"))
                .tag(0)
                .background(Image("background-gradient")
                        .scaledToFill()
//                        .scaledToFit()
            )
            VStack {
                Text("TEST 1")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Bottom Right"))
                .tag(1)
                .background(Color.clear)
            VStack {
                Text("TEST 2")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Rotator"))
                .tag(2)
            VStack {
                Text("TEST 3")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Quadrants"))
                .tag(3)
                .background(Color.clear)
        })
        .padding()
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        RVS_SpinnerSwiftUI_Tabbed_Test_Harness_ContentView()
    }
}
#endif

第一个选项卡中的 .background(Image("background-gradient")) 存在问题。我正在使用它来制作操作原型。一旦我弄清楚了一切，我会更明智地完成这项工作。

Here's the file in GH.

它可能会随着时间的推移而改变，所以我理解如果人们希望我用核武器攻击 link，但它确实允许人们看到它（目前）。

我想弄清楚如何水平拉伸背景图像以填充选项卡。

Answer 1

答案是...

信封，好吗？

.resizable()!

您确实使用了 .background() 方法，但是您使 Image() 可调整大小，如下所示：

var body: some View {
    TabbedView(selection: $selection, content: {
        VStack {
            Text("TEST 0")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Simple Center"))
            .tag(0)
        VStack {
            Text("TEST 1")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Bottom Right"))
            .tag(1)
            .background(Color.clear)
        VStack {
            Text("TEST 2")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Rotator"))
            .tag(2)
        VStack {
            Text("TEST 3")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Quadrants"))
            .tag(3)
            .background(Color.clear)
    })
    .background(
        Image("background-gradient")
            .resizable()
            .scaledToFill()
    )
    .padding()
}

这会拉伸它。

现在，我需要弄清楚如何使 TabbedView 清除其背景。

Answer 2

我找到了一种将图像放入我的应用程序背景的非常简单的方法。
完美拉伸，填充也覆盖了安全区域。
你应该试试。

导入 SwiftUI

struct ContentView: View {
    var body: some View {
        
        ZStack {
            
            Image("imagename")
                .resizable() 
                .edgesIgnoringSafeArea(.all)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SwiftUI：拉伸背景图像以填充

SwiftUI: Stretching Background Images To Fill

swift

swiftui