SwiftUI：拉伸背景图像以填充

Question

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

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

这是我的工作项目

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

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

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

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

这是 GH 中的文件。

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

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

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 清除其背景。