SwiftUI行高列表-如何控制? [英] SwiftUI Row Height of List - how to control?

问题描述

我在SwiftUI中有一个简单的List.下面包括代码和屏幕截图. 我想减少列表中每一行的高度(以使行和文本行之间的间距更小).

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).

我已经尝试在HStack中添加一个".frame(height:20)"，但是它只允许增加行距！

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

有办法吗?

谢谢！

杰拉德

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)
        }
    }
  }
}

推荐答案

使用 Environment 变量设置列表中行的最小高度，然后更改 HStack 框架高度达到您想要的高度.

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.

这是代码:

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)
        }
  }

以下是输出:

这篇关于SwiftUI行高列表-如何控制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！