SwiftUI中HStack内两个Menu文本显示异常问题求助

针对你遇到的两个独立Menu在HStack中显示时的文本截断或重叠问题，提供几个实用的解决方案：

方案一：给Menu标签设置最小宽度约束 #

直接给每个Menu的label添加固定的最小宽度，确保HStack为两者分配足够的显示空间，避免重叠或截断：

HStack(spacing: 5) {
    Menu {
        ForEach(monthSymbols, id: \.self) { monthSymbol in
            Button(monthSymbol) {
                // 优化月份索引获取逻辑
                if let index = monthSymbols.firstIndex(of: monthSymbol) {
                    anyDateComponentChanged = true
                    pickedMonthNumber = index + 1
                }
            }
        }
    } label: {
        Text("\(pickedMonthName),")
            .font(.system(size: 24, weight: .semibold, design: .rounded))
            .foregroundColor(colorScheme == .light ? .black : .white)
            .frame(minWidth: 120, alignment: .leading) // 预估最长月份名称的宽度
    }
    
    Menu {
        ForEach(yearsRange, id: \.self) { yearNumber in
            Button(String(yearNumber)) {
                anyDateComponentChanged = true
                pickedYearNumber = yearNumber
            }
        }
    } label: {
        Text(String(pickedYearNumber))
            .font(.system(size: 24, weight: .semibold, design: .rounded))
            .foregroundColor(colorScheme == .light ? .black : .white)
            .frame(minWidth: 60, alignment: .leading) // 年份的最小宽度
    }
}

• 调整minWidth的值适配你的字体和最长文本长度，比如"September"这类长月份名大概需要120左右的宽度（基于24号粗体圆角字体）。

方案二：基于父容器宽度分配比例 #

利用GeometryReader获取父视图的可用宽度，按比例分配给两个Menu，确保它们始终在合理范围内布局：

GeometryReader { geo in
    HStack(spacing: 5) {
        Menu {
            ForEach(monthSymbols, id: \.self) { monthSymbol in
                Button(monthSymbol) {
                    if let index = monthSymbols.firstIndex(of: monthSymbol) {
                        anyDateComponentChanged = true
                        pickedMonthNumber = index + 1
                    }
                }
            }
        } label: {
            Text("\(pickedMonthName),")
                .font(.system(size: 24, weight: .semibold, design: .rounded))
                .foregroundColor(colorScheme == .light ? .black : .white)
                .frame(minWidth: geo.size.width * 0.7, alignment: .leading) // 占70%宽度
        }
        
        Menu {
            ForEach(yearsRange, id: \.self) { yearNumber in
                Button(String(yearNumber)) {
                    anyDateComponentChanged = true
                    pickedYearNumber = yearNumber
                }
            }
        } label: {
            Text(String(pickedYearNumber))
                .font(.system(size: 24, weight: .semibold, design: .rounded))
                .foregroundColor(colorScheme == .light ? .black : .white)
                .frame(minWidth: geo.size.width * 0.3 - 5, alignment: .leading) // 占30%宽度，减去spacing
        }
    }
}

• 这种方式会让布局自适应父容器大小，同时保证两个Menu不会互相挤压重叠。

方案三：动态计算最小宽度 #

通过计算最长文本的实际宽度，给HStack设置精准的最小宽度，确保完全容纳所有可能的文本内容：

// 先计算最长月份和年份的文本宽度（可以放在视图的init或onAppear中）
private func calculateMinWidths() -> (CGFloat, CGFloat) {
    let longestMonth = monthSymbols.max { $0.count < $1.count } ?? ""
    let monthText = Text(longestMonth)
        .font(.system(size: 24, weight: .semibold, design: .rounded))
    let monthWidth = monthText.sizeThatFits(.zero).width
    
    let yearText = Text("9999")
        .font(.system(size: 24, weight: .semibold, design: .rounded))
    let yearWidth = yearText.sizeThatFits(.zero).width
    
    return (monthWidth, yearWidth)
}

// 在视图中使用
@State private var minMonthWidth: CGFloat = 0
@State private var minYearWidth: CGFloat = 0

var body: some View {
    HStack(spacing: 5) {
        Menu {
            ForEach(monthSymbols, id: \.self) { monthSymbol in
                Button(monthSymbol) {
                    if let index = monthSymbols.firstIndex(of: monthSymbol) {
                        anyDateComponentChanged = true
                        pickedMonthNumber = index + 1
                    }
                }
            }
        } label: {
            Text("\(pickedMonthName),")
                .font(.system(size: 24, weight: .semibold, design: .rounded))
                .foregroundColor(colorScheme == .light ? .black : .white)
                .frame(minWidth: minMonthWidth, alignment: .leading)
        }
        
        Menu {
            ForEach(yearsRange, id: \.self) { yearNumber in
                Button(String(yearNumber)) {
                    anyDateComponentChanged = true
                    pickedYearNumber = yearNumber
                }
            }
        } label: {
            Text(String(pickedYearNumber))
                .font(.system(size: 24, weight: .semibold, design: .rounded))
                .foregroundColor(colorScheme == .light ? .black : .white)
                .frame(minWidth: minYearWidth, alignment: .leading)
        }
    }
    .onAppear {
        let widths = calculateMinWidths()
        minMonthWidth = widths.0
        minYearWidth = widths.1
    }
    .frame(minWidth: minMonthWidth + minYearWidth + 5) // 加上spacing的5
    .fixedSize(horizontal: true, vertical: false)
}

• 这个方案最精准，能完全适配所有可能的文本长度，不会出现截断或重叠。

另外，你原来的月份索引获取逻辑可以优化成用firstIndex(of:)，比遍历整个数组更高效简洁。

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