andrewz
andrewz

Reputation: 5220

Trying to display a vertical scroll view centered on the screen

The text appears near the top of the screen, not centered in the middle of the screen. Any idea how to center the content on the screen? enter image description here

    var body : some View {

        VStack {

            ScrollView.init([.vertical]) {

                Text("AAA")
                Text("BBB")
                Text("CCC")
                Text("DDD")
                Text("EEE")

            }
            .border(Color.blue)

        }
        .border(Color.red)
    }

Upvotes: 0

Views: 49

Answers (2)

Mussa Charles
Mussa Charles

Reputation: 4412

Adding Spacers on both sides + Fixing size of scrollView will help. Here is your fixed code.

   var body: some View {
    VStack {
         Spacer() // Spacer at the top
        ScrollView([.vertical]) {
            Text("AAA")
            Text("BBB")
            Text("CCC")
            Text("DDD")
            Text("EEE")
        }.border(Color.blue)
        .fixedSize() // Fix size
       Spacer() // Spacer at the bottom.
    }.border(Color.red)
}

OUTPUT enter image description here

Upvotes: 1

Asperi
Asperi

Reputation: 257711

Use fixed size as below (it fits size to content)

ScrollView([.vertical]) {
    Text("AAA")
    Text("BBB")
    Text("CCC")
    Text("DDD")
    Text("EEE")
}
.fixedSize()

Upvotes: 0

Related Questions