macOS 11.4下SwiftUI如何将LazyVGrid与Image并排布局并填充剩余宽度

在LazyVGrid的修饰符中添加.frame(maxWidth: .infinity)即可实现需求，修改后完整代码如下：

import SwiftUI

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

原理解释 #

默认状态下LazyVGrid只会根据内部子元素的尺寸计算自身宽度，不会主动撑满父视图的可用空间。添加maxWidth: .infinity修饰符后，SwiftUI的布局系统会优先满足Image固定100宽度的尺寸需求，再把HStack内剩余的所有横向空间全部分配给LazyVGrid，即可消除两侧的多余空白。
如果需要限制LazyVGrid的最小宽度避免过窄，也可以把frame修饰符调整为.frame(minWidth: 自定义最小宽度值, maxWidth: .infinity)。

内容的提问来源于stack exchange，提问作者J. V.