Как показать строку текста массива в форме кривой в SwiftUI?

Предполагая, что вы хотите, чтобы тексты вращались при прокрутке изображения, это должен быть ScrollTransition.

rotationEffect не может вращать изображение вокруг центра «воображаемого круга», но мы можем аппроксимировать этот эффект, смещая текст вниз в дополнение к rotationEffect около его вершины.

ZStack {
    Color.green
    VStack {
        Spacer()
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                ForEach(stringArray, id: \.self) { item in
                    Text(item)
                        .foregroundColor(.white)
                        .containerRelativeFrame(.horizontal, count: 3, spacing: 10.0)
                        .padding(.bottom, 20)
                        .scrollTransition(.interactive.threshold(.centered)) { content, phase in
                            // I empirically found these magic numbers to create a
                            // *reasonably* convincing effect.
                            // In reality I don't think this should be a linear relationship, 
                            // but I'm too bad at maths to figure out what the correct
                            // formulas should be
                            content
                                .offset(y: 13 * abs(phase.value))
                                .rotationEffect(.degrees(10 * phase.value), anchor: .top)
                        }
                }
            }
        }
        Spacer()
    }
}
.frame(height: 160)
.clipShape(TopProtractorCurveShape())

Если вам нужен эффект табуляции, как на первом снимке экрана, где центрированный текст — это выбранная в данный момент вкладка, вы можете использовать целевое поведение прокрутки .viewAligned:

ZStack {
    Color.green
    // this geometry reader is needed to calculate the correct padding for the HStack,
    // such that the scroll view "snaps" at the centre of the screen
    GeometryReader { geo in
        VStack {
            Spacer()
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 0) {
                    ForEach(stringArray, id: \.self) { item in
                        Text(item)
                            .foregroundColor(.white)
                            .containerRelativeFrame(.horizontal, count: 3, spacing: 10.0)
                            .padding(.bottom, 20)
                            .scrollTransition(.interactive.threshold(.centered)) { content, phase in
                                content
                                    .offset(y: 13 * abs(phase.value))
                                    .rotationEffect(.degrees(10 * phase.value), anchor: .top)
                            }
                    }
                }
                .scrollTargetLayout()
                .padding(.horizontal, geo.size.width / 3)
            }
            .scrollTargetBehavior(.viewAligned)
            Spacer()
        }
    }
}
.frame(height: 160)
.clipShape(TopProtractorCurveShape())

Выход:

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

• Для изогнутого текста решение SwiftUI можно найти в ответе на вопрос SwiftUI: Как обеспечить одинаковое расстояние между буквами в изогнутом текстовом представлении? (это был мой ответ).

• Если известна ширина экрана, то радиус дуги изогнутого текста можно вычислить с помощью Пифагора и тригонометрии. GeometryReader можно использовать для измерения размера экрана.

• Если вы хотите, чтобы между метками было одинаковое расстояние, а не чтобы каждая из меток занимала одинаковое пространство (= равную дугу), то хорошо будет использовать HStack со скрытыми метками, которые действуют как заполнители.

• Изогнутые метки затем отображаются как наложение поверх каждой скрытой метки.

• Угол поворота применяется с использованием смещения по оси y, равного радиусу дуги, затем применяется rotationEffect, после чего смещение по оси y снова отменяется. Здесь очень важен порядок модификаторов.

• Также необходимо смещение по оси X, чтобы компенсировать смещение прокрутки. Для этого необходимо знать расстояние от метки до середины экрана. Еще один GeometryReader вокруг каждой метки можно использовать для определения этого расстояния.

• Чтобы добиться прокрутки, вы можете поместить HStack внутри ScrollView, как вы это делали раньше. Однако мне было сложно реализовать фиксированное позиционирование вокруг центра изображения.

• В качестве альтернативы использованию ScrollView к HStack можно применить смещение по оси X, а для изменения смещения можно использовать DragGesture.

• Когда перетаскивание заканчивается, метка, ближайшая к центру представления, становится выбранной меткой. Чтобы обеспечить фиксированное позиционирование, можно применить настройку смещения по оси X.

Вот как все это сочетается:

struct HomeNew: View {
    let stringArray = ["Dashboard", "Attendance", "Feed", "Time table"]
    let backgroundHeight: CGFloat = 160
    let labelSpacing: CGFloat = 40
    @State private var selectedIndex = 0
    @State private var xOffset = CGFloat.zero
    @GestureState private var dragOffset = CGFloat.zero

    var body: some View {
        GeometryReader { outer in
            let w = outer.size.width
            let halfWidth = w / 2
            let curveHeight = backgroundHeight * 0.1
            let slopeLen = sqrt((halfWidth * halfWidth) + (curveHeight * curveHeight))
            let arcRadius = (slopeLen * slopeLen) / (2 * curveHeight)
            let arcAngle = 4 * asin((slopeLen / 2) / arcRadius)
            HStack(spacing: labelSpacing) {
                ForEach(Array(stringArray.enumerated()), id: \.offset) { index, item in
                    Text(item)
                        .lineLimit(1)
                        .fixedSize()
                        .hidden()
                        .overlay {
                            GeometryReader { proxy in
                                let midX = proxy.frame(in: .global).midX
                                let offsetFromMiddle = midX - (w / 2)

                                // https://stackoverflow.com/a/77280669/20386264
                                CurvedText(string: item, radius: arcRadius)
                                    .foregroundStyle(.white)
                                    .offset(y: -arcRadius)
                                    .rotationEffect(.radians((offsetFromMiddle / w) * arcAngle))
                                    .offset(x: -offsetFromMiddle, y: arcRadius)
                                    .onAppear {
                                        if selectedIndex == index {
                                            xOffset = -offsetFromMiddle
                                        }
                                    }
                                    .onChange(of: dragOffset) { oldVal, newVal in
                                        if newVal == 0 {
                                            let halfWidth = (proxy.size.width + labelSpacing) / 2
                                            if (abs(offsetFromMiddle) < halfWidth) ||
                                                (index == 0 && offsetFromMiddle > 0) ||
                                                (index == stringArray.count - 1 && offsetFromMiddle < 0) {
                                                selectedIndex = index
                                                xOffset -= offsetFromMiddle
                                            }
                                        }
                                    }
                            }
                        }
                }
            }
            .offset(x: xOffset + dragOffset)
            .animation(.easeInOut, value: xOffset)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .updating($dragOffset) { val, state, trans in
                        state = val.translation.width
                    }
                    .onEnded { val in
                        xOffset += val.translation.width
                    }
            )
            .padding(.top, curveHeight + 36)
            .frame(width: w)
        }
        .frame(height: backgroundHeight, alignment: .top)
        .background(.green) //appGreen2
        .clipShape(TopProtractorCurveShape())
        .ignoresSafeArea()
    }
}