SwiftUI LazyVGrid列表项宽度不一致问题求助

问题描述 #

我是SwiftUI新手，开发应用时遇到LazyVGrid列表项宽度不一致的问题：想实现带头部的网格布局，但列表项宽度不均，外观杂乱。已经移除所有leading&trailing修饰符（包括子视图的），添加宽度调整修饰符后问题依旧。

尝试过的方案 #

• 给iPhone端的GridItem设置.fixed(Value)，此时列表项宽度一致，但需要用GeometryReader计算宽度，方案不够优雅。
• 后续测试发现，即便使用.fixed设置宽度，仍存在宽度不一致的情况，GeometryReader方案也无效。

问题截图 #

相关代码 #

IdeasView #

struct IdeasView: View {
    
    let store: StoreOf<IdeasFeature>
    
    var gridItems: [GridItem] {
        if UIDevice.isIPad {
            [
                .init(.flexible(), spacing: 8),
                .init(.flexible(), spacing: 8)
            ]
        } else {
            [
                .init()
            ]
        }
    }
    
    var body: some View {
        self.content
            .onLoad {
                self.store.send(.view(.onViewLoad))
            }
    }
    
    @ViewBuilder private var content: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            NavigationStackStore(self.store.scope(state: \.path,
                                                  action: \.path)) {
                ScrollView(showsIndicators: false) {
                    LazyVGrid(columns: self.gridItems,
                              spacing: 10) {
                        Section {
                            ForEachStore(
                                self.store.scope(state: \.initalItems,
                                                 action: \.idea)
                            ) { itemStore in
                                IdeaItemView(store: itemStore)
                            }
                        } header: {
                            VStack {
                                Text("Here will be header with searchbar")
                                    .background(Color.teal)
                                    .frame(height: 130)
                            }
                        }
                    }
                }
                .modifier(NavigationBarModifier())
                .loader(isLoading: viewStore.isLoading)
                .refreshable {
                    await viewStore.send(.view(.onPulledToRefresh), while: \.isLoading)
                }
            } destination: {
                switch $0 {
                case .details:
                    CaseLet(/IdeasFeature.Path.State.details,
                             action: IdeasFeature.Path.Action.details,
                             then: IdeaDetailsView.init(store:)
                    )
                }
            }
        }
    }
}

IdeaItemView #

struct IdeaItemView: View {
    
    let store: StoreOf<IdeaItemFeature>
    
    var body: some View {
        CardView {
            content
        }
        .onTapGesture {
            self.store.send(.view(.onItemTap))
        }
    }
    
    @ViewBuilder private var content: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            VStack(alignment: .leading, spacing: 6) {
                Text(viewStore.idea.idea)
                Text(viewStore.idea.description)
                Text(viewStore.idea.createdDate.description)
            }
        }
    }
}

CardView #

struct CardView<Content: View>: View {
    
    var content: () -> Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        ZStack(alignment: .center) {
            content()
        }
        .background(Color.white)
        .cornerRadius(16.0)
        .shadow(color: .black, radius: 10.0)
    }
}

解决方法 #

1. 修正GridItem配置 #

iPhone端的GridItem默认使用自适应内容的尺寸，改为.flexible()让列均分可用空间：

var gridItems: [GridItem] {
    if UIDevice.isIPad {
        [
            .init(.flexible(), spacing: 8),
            .init(.flexible(), spacing: 8)
        ]
    } else {
        [
            .init(.flexible(), spacing: 10) // 明确设置flexible
        ]
    }
}

2. 强制CardView内容撑满列宽 #

CardView中的内容默认根据自身文本宽度布局，需要让其填充整个网格列的宽度：

struct CardView<Content: View>: View {
    
    var content: () -> Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        ZStack(alignment: .center) {
            content()
                .frame(maxWidth: .infinity, alignment: .leading) // 左对齐且撑满宽度
        }
        .background(Color.white)
        .cornerRadius(16.0)
        .shadow(color: .black.opacity(0.1), radius: 10.0) // 优化阴影效果
    }
}

3. 让Section头部撑满宽度 #

Section的header默认不会占满整个网格宽度，添加.frame(maxWidth: .infinity)：

Section {
    // ... 内容
} header: {
    VStack {
        Text("Here will be header with searchbar")
            .background(Color.teal)
            .frame(height: 130)
    }
    .frame(maxWidth: .infinity) // 撑满宽度
}

原理说明 #

LazyVGrid的列宽度由GridItem的配置决定，.flexible()会让列均分父容器的可用空间。但子视图如果没有明确撑满列宽，就会根据自身内容尺寸显示，导致宽度不一致。通过强制子视图填充整个列宽，就能保证所有列表项的宽度统一。

内容的提问来源于stack exchange，提问作者Yulia iOS