默认情况下，PageTabViewStyle 会让每个标签页占满整个 TabView 的宽度，所以一次只能看到一个页面。不过我们可以通过调整每个标签页的宽度，让多个标签页同时显示在视图中。

下面是修改后的完整代码，我会在后面说明关键调整点：

import SwiftUI
@available(iOS 14, *)
struct CustomListWithPosition: View {
    @Binding var itemsList: [ItemForPicker]
    @Binding var selectedId: Int
    @State private var visibleRows: [ItemForPicker] = []
    
    // 自定义每个标签页的宽度，这里设为屏幕宽度的70%，可按需调整
    private let itemWidth = UIScreen.main.bounds.width * 0.7
    
    var body: some View {
        TabView(selection: $selectedId) {
            Group {
                ForEach(itemsList, id:\.id) { item in
                    Text("\(item.title)")
                        .frame(width: itemWidth, height: 44) // 给每个标签页设置固定宽度
                        .foregroundColor(selectedId == item.id ? .yellow : .black)
                        .background(Color.gray.opacity(0.1)) // 可选：添加背景色更直观区分每个项
                        .id(item.id)
                        .tag(item.id)
                }
            }
            .rotationEffect(Angle(degrees: -90))
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .rotationEffect(Angle(degrees: 90))
        .frame(height: 200)
        .padding(.horizontal, (UIScreen.main.bounds.width - itemWidth)/2) // 可选：让选中项居中显示
    }
}

struct ItemForPicker : Hashable {
    var id: Int
    var title: String
}

关键修改点说明： #

• 添加了 itemWidth 常量：用来控制每个标签页的宽度，这里设置为屏幕宽度的70%，你可以根据产品需求调整这个比例。
• 给每个 Text 视图设置固定宽度：让每个标签页的宽度小于 TabView 的容器宽度，这样多个项就能同时出现在视图范围内。
• 可选优化项：添加背景色能帮你更直观看到每个标签页的范围；添加水平内边距可以让选中的项始终保持在视图居中位置，提升交互体验。

这样调整后，你在滚动时就能同时看到当前选中项和左右两侧的部分标签页了。

内容的提问来源于stack exchange，提问作者Rua Abu Gharbia