CustomCellView inside List is not resizable, using SwiftUI

Question

I tried to design a custom list item using SwiftUI but it's not working as resizable.

1. Red highlighted is dynamic content to resize Text. So the CustomCell should be resized as per content (Red highlighted).
2. All three buttons could be hidden as per property isTranslation in Model ItemModel. So again CustomCell should be resized.

Please help. Thanks in advance.

Example Screenshot -

Below is the code: -

Parent ContentView

struct ParentView: View {
    
    private let list = ItemModel.list
    
    var body: some View {
        
        NavigationView {
            
            ScrollView {
                
                ForEach(list, id: \.self) { item in
                    
                    CustomCell(item: item)
                        .padding(.top, 4)
                        .padding(.horizontal, 8)
                        .cornerRadius(8)
                        .shadow(color: .black, radius: 4, x: 1, y: 1)
                }
            }
            .navigationBarTitle("Nav Title", displayMode: .automatic)
        }
    }
}

Model

struct ItemModel: Decodable, Hashable {
    var sno: String
    var content: String
    var reference: String
    var isTranslation: Bool
    
    static let list: [ItemModel] = Bundle.main.decode(fileName: "items.json")
}

Custom Cell View

struct CustomCell: View {
    
    var item: ItemModel
    
    var body: some View {
        
        VStack(spacing: 16) {
            VStack {
                Text("\(item.sno)")
                    .frame(maxWidth: .infinity, alignment: .center)
                    .padding(.vertical, 8)
                    .background(Color.gray)
                    .foregroundColor(.white)
                    .cornerRadius(4)
                    .shadow(color: .gray, radius: 2, x: 1, y: 1)
            }
            VStack(spacing: 16) {
                Text("\(item.content)")
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 150, maxHeight: .infinity, alignment: .topLeading)
                    .multilineTextAlignment(.center)
                Text("\(item.reference)")
                    .foregroundColor(.red)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.leading, 16)
            }
            
            if item.isTranslation {
                HStack {
                    Spacer()
                    TextButtonView(title: "Button 1", color: Color.lightGray, radius: 1)
                    Spacer()
                    TextButtonView(title: "Button 2", color: Color.lightGray, radius: 1)
                    Spacer()
                    TextButtonView(title: "Button 3", color: Color.lightGray, radius: 1)
                    Spacer()
                }
            }
        }
//        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 150, maxHeight: .infinity, alignment: .topLeading)
        .padding(8)
        .multilineTextAlignment(.center)
        .background(Color.white)
    }
}

struct CustomCell_Previews: PreviewProvider {
    static var previews: some View {
        CustomCell(item: ItemModel.list.first!)
    }
}

Bottom 3 Buttons View

struct CustomTextButtonView: View {
    
    var title: String
    var color: Color
    var radius: CGFloat
    
    var body: some View {
        
        Text(title)
            .frame(maxWidth: .infinity, alignment: .center)
            .padding(.vertical, 8)
            .background(color)
            .cornerRadius(4)
            .shadow(color: .gray, radius: radius, x: 1, y: 1)
    }
}

Json file: -

[
  {
    "sno": "1",
    "content": "Now, let’s add a brand new view to our project which is going to be presented when user taps the bell button.",
    "reference": "SheetView",
    "isTranslation": true
  },
  {
    "sno": "2",
    "content": "Now, let’s add a brand new view to our project which is going to be presented when user taps the bell button. We’re going to call it a SheetView and it’s also going to be a NavigationView with a title. In this case, the title of the navigation bar is styled to be displayed inline (in the middle of the navigation bar)",
    "reference": "let’s add a brand new view",
    "isTranslation": true
  },
  {
    "sno": "3",
    "content": "SwiftUI’s sheets are used to present new views over existing ones, while still allowing users to drag down to dismiss the new view when they are ready.         To use a sheet, give it something to show (some text, an image, a custom view, etc), add a Boolean that defines whether the detail view should be showing, then attach it to your main view as a modal sheet.         For example, this creates a simple detail view, then presents it from ContentView when a button is tapped:",
    "reference": "Hello",
    "isTranslation": false
  }
]

Answer 1

Don't use "minHeight: 150" with text It will take atleast 150 height no matter how short that text is. Remove minHeight, it will work fine.

for unlimited lines of text, you can use this

Text("")
 .fixedSize(horizontal: false, vertical: true)