Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI Row Height of List - how to control?

I have a simple List in SwiftUI. Code and Screenshot included below. I would like to reduce the height of each row in the list (so less space between lines and text lines closer together).

I already tried to add a ".frame(height: 20)" to the HStack but it only allows the line spacing to be increased!

Is there a way to do that?

Thanks!

Gerard

import SwiftUI

struct PressureData: Identifiable {
  let id: Int
  let timeStamp: String
  let pressureVal: Int
}

struct ContentView : View {
  @State var pressureList = [
    PressureData(id: 0, timeStamp: "11:49:57", pressureVal: 10),
    PressureData(id: 1, timeStamp: "11:49:56", pressureVal: 8),
    PressureData(id: 2, timeStamp: "11:49:55", pressureVal: 9),
    PressureData(id: 3, timeStamp: "11:49:54", pressureVal: 1),
  ]

  var body: some View {
    VStack {
        Text("Pressure Readings")
            .font(.system(size: 30))
        List(pressureList) { row in
            HStack {
               Spacer()
                Text(row.timeStamp)
                Text("--->")
                Text(String(row.pressureVal))
                Spacer()
            } .frame(height: 30)
        }
    }
  }
}

enter image description here

like image 621
Gerard Avatar asked Oct 04 '19 19:10

Gerard


People also ask

How to change List row height SwiftUI?

OK, the recipe is quite simple. You use EnvironmentValue named defaultMinListRowHeight to set, well, default minimum list row height :D. Similarly, you can dictate the height of section headers with defaultMinListHeaderHeight .

How do I make a view take full height in SwiftUI?

1 We push a text view to the leading edge of the invisible frame. Here is another example where we push a text view to the trailing edge of the invisible frame. To make a view taking full height, instead of setting maxWidth to .infinity, we set maxHeight to .infinity. Text("Hello, SwiftUI!")

How to set the frame of a text view in SwiftUI?

The frame of a text view equals the string it contains, as you can see from the pink border. A text view take space equals to its contents. Apply .frame (maxWidth: .infinity) to make a view fill container width. Text("Hello, SwiftUI!") 1 Set .frame (maxWidth: .infinity) to make the text view expand to fill a container width.

What are the default list styles in SwiftUI?

Default List Styles in SwiftUI 1 DefaultListStyle () 2 GroupedListStyle () 3 InsetGroupedListStyle () 4 SidebarListStyle ()

How to change the height of a row in a list?

Use Environment variable to set min Height of the row in the list and after that change the HStack frame height to your desired height.


1 Answers

Use Environment variable to set min Height of the row in the list and after that change the HStack frame height to your desired height.

Here is the code:

var body: some View {
    VStack {
        Text("Pressure Readings")
            .font(.system(size: 30))
        List(pressureList) { row in
            HStack {
                Spacer()
                Text(row.timeStamp)
                Text("--->")
                Text(String(row.pressureVal))
                Spacer()
            }.frame(height: 10)
        }.environment(\.defaultMinListRowHeight, 10)
    }
}

Here is the output:

enter image description here

like image 192
Razib Mollick Avatar answered Oct 16 '22 21:10

Razib Mollick