SwiftUI：如何让设置.frame(maxWidth: .infinity)的HStack均分空间？

要让HStack内的TabBar图标均分可用空间，有两种简单直接的实现方式：

方法一：给每个图标设置maxWidth: .infinity #

给每个Image组件添加.frame(maxWidth: .infinity)，让每个图标自动占据均等的横向空间。修改后的MainTabBar代码如下：

struct MainTabBar: View {
    var body: some View {
        HStack(alignment: .center) {
            Image.chatTabBarItem
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 26, height: 26)
                .foregroundColor(.white)
                .padding(4)
                .clipShape(Circle())
                .frame(maxWidth: .infinity) // 添加这一行
                .onTapGesture {
                    
                }
            Image.groupTabBarItem
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 26, height: 26)
                .foregroundColor(.white)
                .padding(4)
                .clipShape(Circle())
                .frame(maxWidth: .infinity) // 添加这一行
                .onTapGesture {
                    
                }
            Image.circleTabBarItem
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 26, height: 26)
                .foregroundColor(.white)
                .padding(4)
                .clipShape(Circle())
                .frame(maxWidth: .infinity) // 添加这一行
                .onTapGesture {
                    
                }
        }
        .frame(height: 60)
        .frame(maxWidth: .infinity)
        .background(Color.green)
    }
}

方法二：使用Spacer分隔图标 #

在HStack的每个图标之间添加Spacer()，Spacer会自动均分剩余的横向空间，让图标均匀分布：

struct MainTabBar: View {
    var body: some View {
        HStack(alignment: .center) {
            Image.chatTabBarItem
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 26, height: 26)
                .foregroundColor(.white)
                .padding(4)
                .clipShape(Circle())
                .onTapGesture {
                    
                }
            Spacer() // 添加分隔
            Image.groupTabBarItem
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 26, height: 26)
                .foregroundColor(.white)
                .padding(4)
                .clipShape(Circle())
                .onTapGesture {
                    
                }
            Spacer() // 添加分隔
            Image.circleTabBarItem
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 26, height: 26)
                .foregroundColor(.white)
                .padding(4)
                .clipShape(Circle())
                .onTapGesture {
                    
                }
        }
        .frame(height: 60)
        .frame(maxWidth: .infinity)
        .padding(.horizontal, 20) // 可选：添加左右内边距避免贴边
        .background(Color.green)
    }
}

原理说明 #

SwiftUI的HStack默认采用紧凑布局，只会给子元素分配其内容所需的空间。通过给子元素设置maxWidth: .infinity，或者用Spacer填充空白区域，就能让所有图标自动均分HStack的总宽度，实现均匀分布的效果。

内容的提问来源于stack exchange，提问作者Zin Win Htet