swift 在GeometryReader中理解框架的理想高度、最大高度

fumotvh3  于 2022-12-21  发布在  Swift
关注(0)|答案(1)|浏览(132)

我有3个按钮显示在GeometryReader中。我很难理解如何正确使用.frame(),以便当按钮显示在GeometryReader高度足以容纳所有3个按钮的设备(iPhone 14)上时,按钮理想地具有设定的高度(例如60);否则,将高度设置为GeometryReader height*0.3
我的代码:

GeometryReader { geometry in
    VStack(alignment: .center) {
        ForEach((0..<3), id: \.self) {i in
            
            Button(action: {
                self.selected = i
            }) {
                VStack {
                    HStack {
                        Text(icons[i])
                            .font(.system(size: 24))
                        Text(buttonNames[i])
                            .font(.system(size: 20))
                    }
                }
                .foregroundColor(.black)
                .frame(maxWidth: UIScreen.main.bounds.width - 88, idealHeight: 60, maxHeight: (geometry.size.height * 0.3), alignment: .leading)
                .padding([.leading, .trailing])
                .background(
                    RoundedRectangle(cornerRadius: 20)
                        .fill(Color.white)
                )
                .overlay( self.selected == i ?
                          RoundedRectangle(cornerRadius: 20)
                    .stroke(LinearGradient(colors: [blue1, blue3], startPoint: .top, endPoint: .bottom), lineWidth: 2)
                          : nil
                )
            }
        }
    }.frame(width: geometry.size.width,
            height: geometry.size.height,
            alignment: .center)
}

目前,它使用maxHeight,而不考虑设备。这是为什么?

pftdvrlh

pftdvrlh1#

据我所知,你的目标是你不需要一个GeometryReader作为SwiftUI是接管了很多工作给你。
您只需为按钮定义maxHeight为60。
这意味着按钮框架将尝试采用最大60像素的高度(如果可用)。如果不可用,剩余空间将由所有视图平均分配-在您的情况下为三个按钮。
我在按钮下面设置了一个虚拟元素,您可以放大它来“挤压”按钮,看看会发生什么:

struct ContentView: View {
    
    @State private var selected = 0
    @State private var height = 300.0

    var body: some View {
        
        //        GeometryReader { geometry in
        VStack(alignment: .center) {
            ForEach((0..<3), id: \.self) {i in
                
                Button(action: {
                    self.selected = i
                }) {
                    HStack {
                        Text("👉🏻")
                            .font(.system(size: 24))
                        Text("Button \(i+1)")
                            .font(.system(size: 20))
                    }
                    .foregroundColor(.black)
                    .frame(maxWidth: .infinity, maxHeight: 60, alignment: .leading)
                    .padding(.horizontal)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .fill(Color.white)
                    )
                    .overlay( self.selected == i ?
                              RoundedRectangle(cornerRadius: 20)
                        .stroke(LinearGradient(colors: [.blue, .teal], startPoint: .top, endPoint: .bottom), lineWidth: 2)
                              : nil
                    )
                }
            }
            
            // other dummy element
            Color.gray
                .frame(height: height)
            Slider(value: $height, in: 10...1000)
            
        }
        .padding()
    }
}

相关问题