Home > database >  SwiftUI Size Struct by .frame modifier
SwiftUI Size Struct by .frame modifier

Time:06-08

Hello I got a Custom Button Struct which has an Image and a Text and also a Style for that Button, which is added at the end of the Struct. My Question is: Is there any way I can use the .frame(width: , height: ) and .frame(minWidth: maxWidth) modifier, without passing a variable to the struct which then passes it to the button style?

CustomButton:

struct CustomButtonWithImage: View {
let title: String
let image: String
let action: () -> Void

var body: some View {
    Button(action: action) {
        HStack {
            Image(image)
                .resizable()
                .renderingMode(.template)
                .frame(maxWidth: imageSize.width, maxHeight: imageSize.height)
                .aspectRatio(contentMode: .fit)
            Text(title)
                .font(.system(size: fontSize))
                .bold()
                .minimumScaleFactor(0.8)
                .lineLimit(1)
        }
        .padding(.horizontal, horizontalPadding)
    }
    .buttonStyle(CustomButtonStyle(size: buttonSize)) // <- Button Style
    .accentColor(Color.white)
}

}

struct CustomButtonStyle: ButtonStyle {

func makeBody(configuration: Self.Configuration) -> some View {
    configuration
        .label
        .contentShape(Rectangle())
        .foregroundColor(Color.white)
        .accentColor(Color.white)
        .background(Color("CustomButtonColor"))
}

}

Basically I just want to Do this:

var body: some View {
    VStack {
        CustomButton(text: "hello": image("someImage.png") { print("hello") }
            // Is there a way to set this without passing the struct a var or let?
            // I can set this but this wont make the button bigger, because the label in the button style wont change size with this
            .frame(width: 40, height: 50)
            .frame(maxWidth: ..., maxHeight: ...)
    }
}

}

CodePudding user response:

Remove hardcoded frame and add max allowed, so it will consume available space shrank only by other views layout. Also you can use only one, either maxWidth or maxHeight restriction if needed.

CustomButton(text: "hello": image("someImage.png") { print("hello") }
//    .frame(width: 40, height: 50)    // remove hardcode
    .frame(maxWidth: .infinity, maxHeight: .infinity)  // << max allowed
  • Related