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

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. ☹️)