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)
}
}
}
}
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 .
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!")
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.
Default List Styles in SwiftUI 1 DefaultListStyle () 2 GroupedListStyle () 3 InsetGroupedListStyle () 4 SidebarListStyle ()
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.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With