SwiftUI中如何让Button与ListView宽度保持一致？

作为SwiftUI新手，你可以通过以下几种简单的修饰符组合实现需求：

最推荐的方法：用frame(maxWidth: .infinity)撑满宽度 #

给List和Button都添加frame(maxWidth: .infinity)，让它们横向占满父容器的可用空间，这样两者宽度就会自动对齐。示例代码：

VStack {
    List {
        Text("列表项1")
        Text("列表项2")
        Text("列表项3")
    }
    .frame(maxWidth: .infinity) // 让List占满横向空间
    
    Button("执行操作") {
        // 这里写按钮点击后的逻辑
    }
    .frame(maxWidth: .infinity) // 让Button横向撑满
    .padding()
    .background(Color.blue)
    .foregroundColor(.white)
    .cornerRadius(8)
}
.padding() // 给整体加内边距，避免内容贴屏幕边缘

提示：默认Button是自适应内容宽度的，所以一定要加背景样式才能直观看到宽度变化

精准匹配List宽度：用GeometryReader读取尺寸 #

如果需要严格匹配List的实际宽度（比如List有自定义内边距时），可以用GeometryReader获取父容器的宽度，再应用到Button上：

VStack {
    GeometryReader { geo in
        VStack {
            List {
                Text("列表项1")
                Text("列表项2")
            }
            .listStyle(.plain) // 可选：去掉List默认的样式内边距
            
            Button("执行操作") {
                // 按钮逻辑
            }
            .frame(width: geo.size.width)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
    }
}
.padding()

适配固定宽度场景：动态读取List尺寸 #

如果List的宽度是固定的，还可以直接读取List的尺寸来设置Button宽度：

VStack(alignment: .leading) {
    let customList = List {
        Text("列表项1")
        Text("列表项2")
    }
    
    customList
    
    Button("执行操作") {
        // 按钮逻辑
    }
    .frame(width: customList.sizeThatFits(.infinity).width)
    .padding()
    .background(Color.blue)
    .foregroundColor(.white)
    .cornerRadius(8)
}

这种方式适合布局固定的场景，动态布局下推荐前两种方法。

内容的提问来源于stack exchange，提问作者Nick Patel