Как бы я создал визуальный эквивалент UIView в SwiftUI?

Question

Вот мой код для моих List элементов в моем проекте с использованием SwiftUI.

struct ServicesListItem: View {

    var title: String
    var description: String
    var colorHex: String
    var imageName: String

    var body: some View {
        HStack {
            Image(imageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
            VStack(alignment: .leading, spacing: 4) {

                Text(title)
                    .font(.system(size: 14, weight: .black, design: .rounded))
                    .foregroundColor(Color(hex: colorHex))

                Text(description)
                    .font(.system(size: 10, weight: .medium, design: .rounded))
                    .foregroundColor(Color.gray)
            }
            .frame(height: 60)
        }
    }
}

Я хочу поместить все элементы каждого ServicesListItem в другое «представление» и добавить отступы насо всех сторон, чтобы создать впечатление, что содержимое каждого предмета находится внутри рельефного вида, а не от края к краю, как у List.Я легко сделал это с помощью UIKit, используя UIView в качестве родительского представления внутри UITableViewCell.не нашел средства сделать это с SwiftUI.Возможно ли это?

Answer 1

SwiftUI 1.0

Привет, Остин, вот несколько важных изменений, которые я внес в ваш вид элемента списка:

• Переместил фрейм на уровень HStack
• Заставил HStack заполнить ширину устройства с помощью .maxWidth: .infinity
• Добавлен сплошной цвет фона, к которому затем можно добавить тень для "рельефного вида"

Код

struct ServicesListItem: View {
    var title: String
    var description: String
    var colorHex: String
    var imageName: String

    var body: some View {
        HStack {
            Image(imageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)

            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.system(size: 14, weight: .black, design: .rounded))
                    .foregroundColor(Color(hex: colorHex))

                Text(description)
                    .font(.system(size: 10, weight: .medium, design: .rounded))
                    .foregroundColor(Color.gray)
            }
        }
        // Set the size of entire row. maxWidth makes it take up whole width of device.
        .frame(maxWidth: .infinity, maxHeight: 60, alignment: .leading)
        .padding(10) // Spacing around all the contents
        // Add a solid colored background that you can put a shadow on
        // (corner radius optional)
        .background(Color.white.cornerRadius(5).shadow(radius: 3))
    }
}

Пример

Это похоже на то, о чем вы думали?

(Начиная с SwiftUI 1.0 мыне знаю, как убрать строки. ☹️)