How would I create the visual equivalent of a UIView in SwiftUI?

Question

Here is my code for my List items in my project using 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)
        }
    }
}

I want to put all of the elements of each ServicesListItem inside another "view" and add padding on all sides to give the appearance that the contents of each item are inside a raised view rather than the edge-to-edge look of the List. I've done this easily with UIKit by using a UIView as a parent view inside of a UITableViewCell. haven't found a means of doing this yet with SwiftUI. Is it possible?

Answer 1

SwiftUI 1.0

Hi Austin, here are a couple of relevant changes I made to your list item view:

• Moved the frame to the HStack level
• Made HStack fill width of device with .maxWidth: .infinity
• Added a solid background color that you can then add a shadow to for the "raised look"

Code

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

Example

Is this similar to what you were thinking?

(As of SwiftUI 1.0, we don't know how to remove the lines. ☹️)