Search code examples
swiftswiftuilazyvgrid

How to put LazyVGrid next to Image swiftUI on MacOS (11.4)


(MacOS app) I am trying to place a lazyvgrid next to an image. to have the image in a specific size and let the LazyVGrid take the rest of the width. I set the frame of the image but than the grid does not take the extra space and there are extra empty space to the left and right of the image and the grid.

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            LazyVGrid(columns: [GridItem(
                 .adaptive(minimum: 40)
            )]){
                Text("Placeholder")
                Text("Placeholder")
            }
            .padding()
            .background(Color.blue)
            Image("bla")
                .resizable()
                //.scaledToFit()
                .frame(width: 100, height: 100)
                .background(Color.pink)
        }
    }
}

extra space to the left and to the right


Solution

  • try something like this:

    struct ContentView: View {
        var body: some View {
            HStack {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 40))]){
                    Text("Placeholder")
                    Text("Placeholder")
                }
                .padding()
                // put this here if you want the width and the height to expand
              //  .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                .background(Color.blue)
                // put this here if you want just the width to expand
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
    
                Image(systemName: "globe")
                    .resizable()
                    //.scaledToFit()
                    .frame(width: 100, height: 100)
                    .background(Color.pink)
    
            }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        }
    }