SwiftUI中TabView自定义分页（PageTabViewStyle）异常问题求助

你的胶囊进度条出现跳动、显示不连贯的异常UI，核心原因有三点：

1. shouldShowIndex仅渲染当前Tab前后各一个胶囊，切换时元素频繁增删导致布局突变
2. 胶囊填充逻辑只关联当前Tab索引，未结合progress数组记录的填写状态，没实现“填写内容后填充”的核心需求
3. 用LazyVGrid做横向进度条布局，不如HStack稳定，且列数与循环次数不匹配（列数取progress.count，循环用numberOfPages）

1. 重构ProgressBarView：显示所有胶囊，基于完成状态填充 #

替换网格布局为HStack，去掉胶囊过滤逻辑，确保所有胶囊始终显示，同时关联progress的完成状态：

struct ProgressBarView: View {
    @Binding var progress: [Progress]
    let currentIndex: Int
    
    // 假设你的Progress结构体包含完成状态字段，根据实际结构调整
    struct Progress {
        var isCompleted: Bool
        // 其他业务字段...
    }
    
    var body: some View {
        HStack(spacing: 8) {
            ForEach(0..<progress.count, id: \.self) { index in
                CapsuleView(
                    isCompleted: progress[index].isCompleted,
                    isCurrent: currentIndex == index
                )
                .frame(maxWidth: .infinity) // 让胶囊均分宽度
            }
        }
        .frame(height: 10)
    }
}

2. 重构CapsuleView：区分当前选中与已完成状态 #

修改胶囊样式，分别处理“当前Tab”“已完成填写”“未完成”三种状态：

struct CapsuleView: View {
    let isCompleted: Bool
    let isCurrent: Bool
    
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .fill(fillColor)
            .opacity(0.5)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(strokeColor, lineWidth: 1)
            )
    }
    
    private var fillColor: Color {
        if isCurrent {
            return .blue
        } else if isCompleted {
            return .green
        } else {
            return .clear
        }
    }
    
    private var strokeColor: Color {
        isCurrent ? .blue : .black
    }
}

3. 完善TabView的状态更新逻辑 #

在TextAreaView中监听文本变化，当内容非空时标记对应索引的progress为已完成：

// 调整TextAreaView，添加文本变化回调
struct TextAreaView: View {
    let title: String
    @Binding var text: String
    let onTextUpdate: (String) -> Void
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
            TextEditor(text: $text)
                .onChange(of: text) { newValue in
                    onTextUpdate(newValue)
                }
        }
        .padding()
    }
}

// 在内容视图中绑定状态更新
TabView(selection: $currentIndex.animation()) {
    ForEach(0..<progress.count, id: \.self) { index in
        TextAreaView(
            title: questions[index],
            text: $homeVM.trialText,
            onTextUpdate: { inputText in
                // 去除空白字符后判断是否完成
                progress[index].isCompleted = !inputText.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
            }
        )
        .tag(index)
    }
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

4. 优化动画稳定性 #

若Tab切换时仍有动画异常，可调整动画绑定方式，避免冲突：

// 移除TabView的绑定动画，给进度条单独添加
TabView(selection: $currentIndex) {
    // 内容不变
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

// 给进度条添加独立动画
ProgressBarView(progress: $progress, currentIndex: currentIndex)
    .animation(.easeInOut, value: currentIndex)
    .animation(.easeInOut, value: progress)

调整后，进度条会稳定显示所有胶囊，填写内容后对应胶囊自动填充颜色，Tab切换时也不会出现跳动的异常UI。

内容的提问来源于stack exchange，提问作者Duc Dang