SwiftUI中如何实现指定样式的文本+列表布局？

嘿，我明白你想实现的布局效果啦！看你当前的代码，主要是用了太多Spacer导致列表项的间距不够可控，而且重复代码有点多。我给你调整一下，既能实现最多显示3个列表项、文本均匀排列的需求，还能让代码更简洁复用～

优化后的实现方案 #

首先我们可以把每个卡片的样式抽成一个自定义View，这样后续添加更多卡片时不用重复写样式代码：

struct CardView: View {
    let title: String
    let items: [String]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // 卡片标题
            Text(title)
                .font(Font.custom("Jua-Regular", size: 22))
                .padding(.vertical, 12)
            
            // 列表项：只显示最多3个
            ForEach(items.prefix(3), id: \.self) { item in
                Text("- \(item)")
                    .font(Font.custom("Jua-Regular", size: 18))
            }
            
            // 可选：如果想让列表项靠上，底部留空就保留这个Spacer
            Spacer()
        }
        .padding(22)
        .background(Color(red: 0.60, green: 0.79, blue: 0.89))
        .cornerRadius(12)
        .frame(maxWidth: .infinity) // 让卡片占满HStack分配的宽度，两个卡片平分空间
    }
}

然后在主视图里调用这个自定义卡片：

struct ContentView: View {
    var body: some View {
        HStack(spacing: 22) {
            CardView(title: "Deutsch:", items: ["Lesen", "Ab beende", "Gedicht lernen"])
            CardView(title: "Musik", items: ["Singen", "Vortrag", "Mozart lernen Lebenslauf!"])
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

关键调整说明 #

1. 自定义卡片组件：把重复的背景、圆角、内边距等样式封装起来，代码更整洁，维护更方便。
2. 可控的列表间距：用VStack的spacing参数设置固定的垂直间距，比你之前用多个Spacer更稳定，能让列表项均匀排列。
3. 限制列表项数量：用items.prefix(3)确保最多只显示3个列表项，不管你传入多少数据都不会超出。
4. 均匀的卡片宽度：给卡片加上frame(maxWidth: .infinity)，让两个卡片在HStack里自动平分可用宽度，布局更整齐。

额外需求：列表项垂直均匀分布 #

如果你希望列表项能根据卡片高度自动均匀分配垂直空间（比如卡片高度比较高时），可以把列表部分改成这样：

// 在CardView的VStack里替换原有的列表代码
VStack(spacing: 0) {
    ForEach(items.prefix(3), id: \.self) { item in
        Text("- \(item)")
            .font(Font.custom("Jua-Regular", size: 18))
        Spacer()
    }
}
.frame(maxHeight: .infinity)

这样每个列表项之间的间距会自动拉伸，填满卡片的剩余高度，实现完全均匀的垂直分布～

备注：内容来源于stack exchange，提问作者Jojo Who