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 очистил свой фон.