CODEWITHSUNDEEP
swiftui
Duck
Duck

Reputation: 35933

Vertical alignment of HStack not working and not intuitive

I have this code:

HStack (alignment:.center) {
  Text("50")
  ProgressView("", value: 50, total: 100)
  Text("100")
  Text("mg")
}

the result is

enter image description here

I want this

enter image description here

I have tried everything like adding alignment center to HStack, adding the progress view inside a VStack, etc

Why Apple never manage to make things related to interface design work intuitively?

Upvotes: 1

Views: 207

Answers (1)

swiftPunk
swiftPunk

Reputation: 1

There is another way like not using "", and it works as you want.

import SwiftUI

struct ContentView: View {
    var body: some View {

        HStack  {
            Text("50")
            ProgressView(value: 50, total: 100)  // <<: Here
            Text("100")
            Text("mg")
        }

    }
}

enter image description here

The Version that you used is also good, but has another usage like this down code. And it needs the ProgressView pushed down for Text, actually, in your code ProgressView thinks that "" is the information to show! that is why you see that.

import SwiftUI

struct ContentView: View {
    var body: some View {

        HStack  {
            Text("50")
            ProgressView("This part is for information to help", value: 50, total: 100)
            Text("100")
            Text("mg")
        }

    }
}

enter image description here

Upvotes: 1

Related Questions