如何让HStack填充Scroll View父视图的宽度

问题根源在于横向ScrollView内部的HStack默认会根据子视图尺寸自适应宽度，仅添加.frame(maxWidth: .infinity)无法强制其撑满——因为ScrollView的横向容器不会主动限制内容宽度。要实现预期效果，需让HStack填充ScrollView可用宽度，同时让每个标签项均分空间。

修改方案 #

调整两处核心代码：

1. 让HStack强制撑满ScrollView宽度
2. 让每个TabBarItem占据HStack的等分空间

修改后的完整代码片段如下：

struct TabBarView: View {
    @Binding var currentTab: Int
    @Namespace var namespace
    
    var tabBarOptions: [String] = ["text.bubble", "book"]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) { // 移除固定间距，让子视图均分空间
                ForEach(Array(zip(tabBarOptions.indices, tabBarOptions)), id: \.0) { index, name in
                    TabBarItem(currentTab: $currentTab, 
                               namespace: namespace,
                               tabBarItemName: name,
                               tab: index)
                }
            }
            .frame(maxWidth: .infinity) // 强制HStack填充ScrollView宽度
            .border(.red, width: 4)
        }
        .frame(height: 80)
        .border(.green, width: 2)
        .ignoresSafeArea(.all)
    }
}

struct TabBarItem: View {
    @Binding var currentTab: Int
    let namespace: Namespace.ID
    
    var tabBarItemName: String
    var tab: Int
    
    var body: some View {
        Button {
            currentTab = tab
        } label: {
            VStack {
                Spacer()
                Image(systemName: tabBarItemName)
                    .font(.title)
                if currentTab == tab {
                    Color.black
                        .frame(height: 2)
                        .matchedGeometryEffect(id: "underline",
                                               in: namespace,
                                               properties: .frame)
                } else {
                    Color.clear.frame(height: 2)
                }
                Spacer()
            }
            .frame(maxWidth: .infinity) // 让按钮填充父视图分配的宽度
            .animation(.spring(), value: currentTab)
        }
        .buttonStyle(.plain)
    }
}

关键修改说明 #

• 把HStack的spacing设为0，避免固定间距干扰子视图宽度分配
• 给HStack添加.frame(maxWidth: .infinity)，强制其填充ScrollView的横向可用空间
• 给TabBarItem内部的VStack添加.frame(maxWidth: .infinity)，让每个标签项均分HStack宽度，同时保证整个区域可点击
• 给VStack添加上下Spacer()，让图标和下划线垂直居中，优化视觉布局

修改后HStack会完全占据屏幕宽度，每个标签项均分空间，与预期效果一致。

内容的提问来源于stack exchange，提问作者Zhou Haibo