首页 > 解决方案 > SwiftUI:拉伸背景图像以填充

问题描述

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

我正在构建这个项目的 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中的文件。

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

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

标签: swiftswiftui

解决方案


而答案是……

信封好吗?

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


推荐阅读