swiftui - SwiftUI 如何在 Swift UI 中检索 HStack 对象的大小

Question

我试图弄清楚如何检索它的大小HStack以自动计算将帧分成 3。计划是在活动屏幕标题下方设置一个彩色条，请参见下面的图片示例。

VStack{
      HStack{
          Text("Overview").fontWeight(.black)
          Spacer()
          Text("Bio").fontWeight(.black)
          Spacer()
          Text("Location").fontWeight(.black)
      }
}

让我在哪里试图找出 HStack 的确切大小

我的最终目标是实现这一目标。

Answer 1

将 HStack 包裹在GeometryReader

GeometryReader { g in
  HStack {
    Text("Overview").frame(width: g.size.width / 3)
    Text("Bio").frame(width: g.size.width / 3)
    Text("Location").frame(width: g.size.width / 3)
  }
}

https://developer.apple.com/documentation/swiftui/geometryreader

Answer 2

您也可以使用此库GeometryReaderStacKView直接从堆栈中获取尺寸，而无需将堆栈包装在几何阅读器中

这是一个例子：

// notice the g parameter variable (GeometryProxy) holding the dimensions of the view

 
 // for HStack
 GHStack(alignment: .center, spacing: 0) { (g) in

     Color.green.frame(width: g.width/2, height: g.height/2)
     Color.yellow.frame(width: g.width/2, height: g.height/2)

 }.frame(width: 600, height: 400)

Answer 3

试试下面的代码

内容视图

struct ContentView: View {

    @State var linePlaceType : LinePlace = .leading
    var selectedColor : Color = .purple
    var defaultColor : Color = .gray

    var body: some View {

        GeometryReader { g in
           VStack {
               HStack {

                    Button(action: {
                        self.linePlaceType = .leading
                    }) {
                        TextView(text: "Overview", textColor: self.getColorForText(.leading)).frame(width: g.size.width / 3)
                    }

                    Button(action: {
                        self.linePlaceType = .center
                    }) {
                        TextView(text: "Bio", textColor: self.getColorForText(.center)).frame(width: g.size.width / 3)
                    }

                    Button(action: {
                        self.linePlaceType = .trailing
                    }) {
                        TextView(text: "Location", textColor: self.getColorForText(.trailing)).frame(width: g.size.width / 3)
                    }
                }.frame(height: 40)
                .background(self.defaultColor.opacity(0.2))

                ZStack(alignment: self.linePlaceType.alignment) {

                    LineView().frame(width: g.size.width, height: 5).background(self.defaultColor)
                    LineView().frame(width: g.size.width / 3, height: 5).background(self.selectedColor)
                }.offset(x: 0, y: -12)
            }
        }
    }

    func getColorForText(_ linePlaceType: LinePlace) -> Color {

        if (linePlaceType == self.linePlaceType) {
            return self.selectedColor
        }
        else {
           return self.defaultColor
        }
    }
}

线视图

struct LineView: View {
    var body: some View {
       VStack {
            EmptyView()
        }
    }
}

文本视图

struct TextView: View {

    let text : String?
    let textColor: Color?

    var body: some View {
        VStack {
            Text(self.text!)
            .font(.headline)
            .foregroundColor(self.textColor!)
        }
    }
}

枚举 : LinePlace

enum LinePlace {
    case leading
    case center
    case trailing
}

extension LinePlace {

    var alignment: Alignment {
        switch self {
        case .leading:
            return .leading
        case .center:
            return .center
        case .trailing:
            return .trailing
        }
    }
}

输出：

Answer 4

这个怎么样 ：

      HStack{
    Spacer().overlay(Text("OverView").bold())
    Spacer().overlay(Text("Bio").bold())
    Spacer().overlay(Text("Location").bold())
    }