如何消除SwiftUI中NavigationLink导致的布局空白问题

我遇到了NavigationLink占用空间的问题：原本ColorList在Form的Section中展示正常，每行能显示多个Meeple元素，但将ColorList包裹进NavigationLink后，布局出现异常，界面剩余大量空白，每行仅显示3个元素。

原正常代码 #

struct EditView: View {
    var body: some View {
          NavigationView {
                Form {
                      Section("Colors") {
                          ColorList(colors: viewModel.game.gameColors)
                      }
                }
          }
    }
}

struct ColorList: View {
    let colors: [String]

    private let gridItemLayout = [GridItem(.adaptive(minimum: 44))]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: gridItemLayout) {
                ForEach(colors, id: \.self) { colorName in
                    Meeple(colorName: colorName)
                }
                .padding(.vertical, 2)
            }
        }
    }
}

// Meeple 是一个自定义图片视图
struct Meeple: View {
    // ...
    var body: some View {
        Image("meeple.2.fill")
            .resizable()
            .padding(5)
            .foregroundColor(color.color)
            .background(color.backgroundColor)
            .frame(width: 44, height: 44, alignment: .center)
            .clipShape(RoundedRectangle(cornerRadius: 5))
            .shadow(color: .primary, radius: 5)
    }
}

正常展示效果 #

修改后（包裹NavigationLink）的代码 #

Section("Colors") {
    NavigationLink(destination:
                    MultiColorPickerView(
                        selection: $viewModel.game.colors.withDefaultValue([])
                    )
    ) {
        ColorList(colors: viewModel.game.gameColors)
    }
}

异常展示效果 #

原因分析 #

NavigationLink作为Form的行元素，默认会给内部视图添加水平内边距，同时Form的行布局会限制内部视图的可用宽度，导致LazyVGrid的自适应列计算逻辑无法利用全部可用空间，最终只能生成更少的列数。

解决方案 #

方法一：让ColorList占满可用宽度

给ColorList添加.frame(maxWidth: .infinity)，强制它填满NavigationLink的全部水平空间，这样LazyVGrid就能基于完整宽度计算列数：

Section("Colors") {
    NavigationLink(destination: MultiColorPickerView(
        selection: $viewModel.game.colors.withDefaultValue([])
    )) {
        ColorList(colors: viewModel.game.gameColors)
            .frame(maxWidth: .infinity)
    }
}

方法二：调整Form行的内边距

通过.listRowInsets去除或减小Section行的默认内边距，释放更多水平空间：

Section("Colors") {
    NavigationLink(destination: MultiColorPickerView(
        selection: $viewModel.game.colors.withDefaultValue([])
    )) {
        ColorList(colors: viewModel.game.gameColors)
    }
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
}

方法三：调整LazyVGrid的列配置

直接控制GridItem的数量或尺寸范围，比如设置固定列数，或者调整自适应的最小/最大尺寸：

// 方式1：固定4列
private let gridItemLayout = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]

// 方式2：调整自适应的尺寸范围，让元素更紧凑
private let gridItemLayout = [GridItem(.adaptive(minimum: 44, maximum: 50))]

内容的提问来源于stack exchange，提问作者Karsten S.