Как изменить внешний вид кнопки в зависимости от состояния ее выбора

Вы создаете линию границы, показывая на заднем плане фигуру, которая лишь немного больше фигуры на переднем плане. Вот почему углы не совсем повторяют один и тот же контур.

Я бы посоветовал лучше показать границу, используя .stroke, чтобы вместо этого нарисовать линию вокруг фигуры.

В настоящее время ваш стиль дублируется в нескольких разных местах. Этого можно избежать, если объединить все стили в один ButtonStyle. Это может включать в себя стиль текста переднего плана, а также стиль фона и границы.

Вот пример реализации ButtonStyle на основе предоставленного вами кода:

struct TabButton: ButtonStyle {
    let isOn: Bool
    let withLeftBorder: Bool
    let buttonWidth: CGFloat = 153
    let lineWidth: CGFloat = 2

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.title3)
            .fontWeight(.bold)
            .foregroundStyle(.designMiddleMutedOrange)
            .multilineTextAlignment(.center)
            .frame(width: buttonWidth, height: 55)
            .background {
                if isOn {
                    Rectangle()
                        .fill(
                            LinearGradient(
                                colors: [.FFFAE_6, .designLightYellow],
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .padding(.bottom, lineWidth)
                } else {
                    Color.designLightYellow
                }
            }
            .clipShape(
                UnevenRoundedRectangle(
                    cornerRadii: .init(
                        topLeading: withLeftBorder ? 12 : 0,
                        topTrailing: 12
                    )
                )
            )
            .overlay(alignment: .trailing) {
                UnevenRoundedRectangle(
                    cornerRadii: .init(
                        topLeading: withLeftBorder ? 12 : 0,
                        topTrailing: 12
                    )
                )
                .stroke(.designMiddleMutedOrange, lineWidth: lineWidth)
                .padding(.bottom, lineWidth / 2)
                .frame(width: buttonWidth + (withLeftBorder ? 0 : lineWidth / 2))
            }
            .overlay(alignment: .bottom) {
                if isOn {
                    Color.designLightYellow
                        .padding(.leading, withLeftBorder ? lineWidth / 2 : 0)
                        .padding(.trailing, lineWidth / 2)
                        .frame(height: lineWidth)
                }
            }
    }
}

Это работает следующим образом:

• Текстовая метка отображается на переднем плане.
• Фон заполняется соответствующим FillStyle, в зависимости от того, включена кнопка или нет.
• Затем фон обрезается с помощью UnevenRoundedRectangle, закругляя только те углы, которые необходимо скруглить.
• Другой UnevenRoundedRectangle используется для обводки границы в качестве наложения. Обратите внимание, что когда обводка выполняется таким образом, линия обводки наполовину внутрь и наполовину наружу (середина линии находится на краю кадра), поэтому для удержания ее внутри нижнего края используется отступ.
• Если левая граница не должна быть видна, то форма обводки делается немного шире, чтобы левая граница была вытеснена за пределы экрана. Наложение использует alignment: .trailing, чтобы гарантировать, что правая граница не перемещается.
• Если кнопка включена, нижний край границы маскируется наложением цвета фона.

Кстати, я думаю, что ваш цвет «#FFFAE6» назван неправильно, потому что я думаю, что на самом деле он больше похож на #fec890.

Итак, вот как можно использовать стиль кнопки для двух кнопок:

struct ContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Button("行程簡介") { selectedTab = 0 }
                    .buttonStyle(
                        TabButton(
                            isOn: selectedTab == 0,
                            withLeftBorder: false
                        )
                    )
                Button("Q&A") { selectedTab = 1 }
                    .buttonStyle(
                        TabButton(
                            isOn: selectedTab == 1,
                            withLeftBorder: true
                        )
                    )
                Spacer()
            }
            .background(alignment: .bottom) {
                Color.designMiddleMutedOrange
                    .frame(height: 2) // = lineWidth of button border
            }

            Color.designLightYellow
        }
        .frame(height: 300)
    }
}

РЕДАКТИРОВАТЬ В ответ на ваш комментарий UnevenRoundedRectangle был добавлен в iOS 16.0. Если он вам недоступен, альтернативным подходом будет использование вместо него пользовательского Shape.

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

struct TabButtonShape: Shape {
    let withRoundedTopLeftCorner: Bool
    let cornerRadius: CGFloat = 12
    func path(in rect: CGRect) -> Path {
        var path = Path()
        var x = rect.minX
        var y = rect.maxY
        path.move(to: CGPoint(x: x, y: y))
        y = rect.minY + (withRoundedTopLeftCorner ? cornerRadius : 0)
        path.addLine(to: CGPoint(x: x, y: y))
        if withRoundedTopLeftCorner {
            path.addArc(
                center: CGPoint(x: x + cornerRadius, y: y),
                radius: cornerRadius,
                startAngle: .degrees(180),
                endAngle: .degrees(270),
                clockwise: false
            )
            y = rect.minY
        }
        x = rect.maxX - cornerRadius
        path.addLine(to: CGPoint(x: x, y: y))
        path.addArc(
            center: CGPoint(x: x, y: y + cornerRadius),
            radius: cornerRadius,
            startAngle: .degrees(270),
            endAngle: .degrees(0),
            clockwise: false
        )
        x = rect.maxX
        y = rect.maxY
        path.addLine(to: CGPoint(x: x, y: y))
        path.closeSubpath()
        return path
    }
}

Это можно использовать для замены UnevenRoundedRectangle, который использовался ранее:

.clipShape(
    TabButtonShape(withRoundedTopLeftCorner: withLeftBorder)
//    UnevenRoundedRectangle(
//        cornerRadii: .init(
//            topLeading: withLeftBorder ? 12 : 0,
//            topTrailing: 12
//        )
//    )
)
.overlay(alignment: .trailing) {
    TabButtonShape(withRoundedTopLeftCorner: withLeftBorder)
//    UnevenRoundedRectangle(
//        cornerRadii: .init(
//            topLeading: withLeftBorder ? 12 : 0,
//            topTrailing: 12
//        )
//    )
    .stroke(.designMiddleMutedOrange, lineWidth: lineWidth)
    .padding(.bottom, lineWidth / 2)
    .frame(width: buttonWidth + (withLeftBorder ? 0 : lineWidth / 2))
}

Надеюсь, теперь это решение поможет вам.