SwiftUI:拉伸(stretch)背景图像以填充

Question

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

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

This is my Working Project

我要做的第一件事是设置选项卡。我预计会学到很多东西，也会遇到很多困难。

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

这采用我水平拉伸(stretch)的条纹形式。

有了 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")) 中。我正在使用它来制作操作原型(prototype)。一旦我弄清楚了一切，我就会使这项工作更加明智。

Here's the file in GH.

它可能会随着时间的推移而改变，所以我理解人们是否希望我取消链接，但它确实允许人们看到它(目前)。

我有兴趣弄清楚如何水平拉伸(stretch)背景图像以填充选项卡。

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()
}

这会拉伸(stretch)它。

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