Изменить ширину текста без увеличения ширины стека

Question

  let months = ["january" , "februarry", "march", "april", "may", "june", "july", "august",    "september", "october", "november", "december"]
   var body: some View {
        HStack {
            ForEach(months, id: \.self) { month in
                VStack {
                    if month == "october" {
                        Text(month)
                    }
                    Rectangle()
                        .frame(width: 25, height: 10)
                }
            }
        }
    }

Как отобразить текст во всю длину без изменения ширины VStack и, следовательно, расстояния между квадратами.

Это должно выглядеть так:

Answer 1

хорошо, как насчет этого хака:

let months = ["january" , "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]
@State var chosenMonth = ""

var body: some View {
    VStack {
        HStack {
            Spacer()
            Text(chosenMonth)
            Spacer()
        }
        HStack {
            ForEach(self.months, id: \.self) { month in
                Rectangle().frame(width: 25, height: 10).onAppear(perform: {
                    if month == "october" {
                        self.chosenMonth = month
                    }
                })
            }
        }
    }
}

Answer 2

Здесь возможен подход, основанный на направляющих выравнивания. Протестировано с Xcode 11.4 / iOS 13.4

Идея состоит в том, чтобы использовать полосы и текст на разных слоях и выравнивать их с помощью пользовательского руководства по выравниванию, с обработкой угловых случаев, чтобы текст не выпадал из экрана.

extension HorizontalAlignment {
    private enum MonthAlignment : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[HorizontalAlignment.center]
        }
    }

    static let monthAlignment = HorizontalAlignment(MonthAlignment.self)
}

struct DemoMonthAlignment: View {
    let months = ["january" , "februarry", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]
    @State private var selectedMonth = "october"
    var body: some View {


        VStack(alignment: .monthAlignment, spacing: 2) {
            Text(selectedMonth)
                .alignmentGuide(.monthAlignment, computeValue: { d in
                    if self.selectedMonth == self.months.first {
                        return d[.leading]
                    } else if self.selectedMonth == self.months.last {
                        return d[.trailing]
                    } else {
                        return d[HorizontalAlignment.center]
                    }
                })
            HStack {
                ForEach(months, id: \.self) { month in
                    Group {
                        if month == self.selectedMonth {
                            Rectangle()
                                .foregroundColor(Color.red)
                                .alignmentGuide(.monthAlignment, computeValue: { d in
                                    if month == self.months.first {
                                        return d[.leading]
                                    } else if month == self.months.last {
                                        return d[.trailing]
                                    } else {
                                        return d[HorizontalAlignment.center]
                                    }
                                })
                        } else {
                            Rectangle()
                        }
                    }
                    .frame(width: 25, height: 10)
                }
            }
        }
    }
}

Answer 3

непонятно, что вы спрашиваете здесь, но вы пробовали что-то вроде этого:

let months = ["january" , "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]

var body: some View {
    ScrollView (.horizontal, showsIndicators: false) {
        HStack {
            ForEach(months, id: \.self) { month in
                VStack {
                    Text(month).fixedSize()  // <--- this
                    Rectangle().frame(width: 25, height: 10)
                }
            }
        }
    }
}