The way to change vertical alignment of particular person gadgets in SwiftUI HStack?

I’ve the next code.

struct ContentView: View {
    @State var textInput: String = "Testing"

    non-public let inputCornerRadius: CGFloat = 24

    var physique: some View {
        HStack(alignment: .backside, spacing: 8) {
            TextField("Chat", textual content: $textInput, axis: .vertical)
                .lineLimit(1...9)
                .textFieldStyle(.plain)

            Button(motion: ship) {
                Picture(systemName: "paperplane.fill")
                    .foregroundStyle(.background)
                    .imageScale(.medium)
                    .padding(10)
                    .background(
                        Circle()
                            .fill(Shade(.label))
                        )
            }
        }
        .padding(.vertical, 8)
        .padding(.main, 10)
        .padding(.trailing, 6)
        .background(
            RoundedRectangle(cornerRadius: inputCornerRadius, model: .steady)
                .fill(Shade(.secondarySystemBackground))
        )
        .clipShape(RoundedRectangle(cornerRadius: inputCornerRadius, model: .steady))
        .padding(.horizontal, 10)
    }

    non-public func ship() {}
}

The problem is that the textual content subject is aligned to the underside. I need it to be centered. Right here is the difficult half tho, I need the ship button to at all times be aligned to the underside (or heart if it is only a single line).

If I alter the HStack alignment to .heart, it really works precisely how I need for single line textual content, however as soon as it will get to be a number of strains, the ship button is centered as a substitute of aligned to the underside.

So listed below are my necessities:

• For single lined textual content, each textual content enter and ship button are centered vertically.
• For multi lined textual content, the ship button is aligned to the underside of the grey background (plus padding).

Issues I’ve tried:

• Setting alignment to .heart (I defined why that would not work above)
• Wrapping the TextField in one other HStack that’s aligned heart (the guardian continues to be aligned backside). This did not have any impact.
• Added a VStack across the TextField, with Spacers on the prime and backside. This had the impact of constructing all the view top stretch to match the guardian views top (which I do not need).
• Added .alignmentGuide(.backside) { d in d[.bottom] } to the Button, and set the alignment to .heart. Nonetheless had no impact, and the button remained centered.

Ideally I would wish to keep away from doing textual content top calculations and all of that. It seems like this must be a reasonably easy UI I am attempting to construct, so it does not appear lifelike to overcomplicate it.

How can I get the Button to at all times be aligned to the underside, whereas the TextField stays centered?