如何让水平ScrollView内的LazyHStack元素填满屏幕宽度？

问题核心在于水平ScrollView的内容区域没有明确的宽度约束，LazyHStack默认会根据子视图的总宽度自适应布局，直接设置maxWidth: .infinity无法生效——因为没有父级宽度作为参考。

具体解决方案 #

通过GeometryReader获取ScrollView的可用宽度，强制每个子视图占满该宽度，就能实现LazyHStack填满屏幕的效果：

struct HorizontalSpotsList: View {
    var spots: [Spot]

    var body: some View {
        ScrollView(.horizontal) {
            // 用GeometryReader捕获ScrollView的可用尺寸
            GeometryReader { geo in
                LazyHStack(alignment: .center, spacing: 0) {
                    if !spots.isEmpty {
                        ForEach(spots.prefix(3), id: \.self) { spot in
                            Text("Test")
                                // 直接使用ScrollView的宽度作为子视图宽度
                                .frame(width: geo.size.width)
                                .background(RoundedRectangle(cornerRadius: 25).fill(Color.white))
                                .border(Color.blue)
                        }
                    }
                }
            }
            .frame(height: 130) // 保持原代码的固定高度
        }
        .frame(maxWidth: .infinity) // 确保ScrollView本身占满父容器宽度
        .border(Color.green)
    }
}

生效原因 #

GeometryReader会实时获取父视图（ScrollView）的尺寸信息，将这个宽度赋值给每个子视图后，LazyHStack的每个项都会和屏幕宽度一致，自然贴合ScrollView的宽度边界，同时保留水平滚动的特性。

如果你的需求是让LazyHStack整体占满屏幕（而非每个子项），也可以直接给LazyHStack设置frame(width: UIScreen.main.bounds.width)，但这种方式不如GeometryReader灵活，无法适配父容器尺寸变化的场景。

内容的提问来源于stack exchange，提问作者loic .B