SwiftUI - Button inside a custom Collection view is not tappable completely-CodePudding

This

has anyone had similar issue? Any inputs is appreciated.

CodePudding user response：

I strongly suspect that you issue has to do with the border. but I don't know exactly because you haven't provided that code.

Here is a version of the button view that would give you the effect you see to want.

struct FloatingToolbarButtonView: View { @Binding var model: ButtonModel let size: CGSize var body: some View { Button(action: { //Set the model's variable to selected model.isSelected.toggle() //Perform the action model.onClick() }, label: { VStack { //REMOVE systemName: in your code Image(systemName: model.imageName) //.renderingMode(.original) .resizable() //Maintains proportions .scaledToFit() //Set Image color .foregroundColor(.white) //Works with most images to change color .colorMultiply(model.colorSettings.imageNormal) .padding(5) .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center) //Set border color/width .border(Color.green, width: model.isSelected ? 3:0) Spacer() Text(model.label) //Set Text color .foregroundColor(model.colorSettings.labelNormal) } .padding(EdgeInsets(top: 5, leading: 3, bottom: 0, trailing: 3)) }).frame(width: size.width, height: size.height, alignment: .center) .background(model.colorSettings.backgroundNormal) } }

And this is what the model I used looks like

//Holds Button information struct ButtonModel: Identifiable{ let id: UUID = UUID() var label: String var imageName: String ///Action to be called when the button is pressed var onClick: () -> Void ///identify if the user has selected this button var isSelected: Bool = false var colorSettings: ButtonColorSettings }

I created the buttons in a view model so I can have an easy to to set the action and access isSelected as needed.

//ViewModel that deals with all the button creation and onClick actions class FloatingToolbarParentViewModel: ObservableObject{ //Settings the buttons at this level lets you read `isPressed` @Published var horizontalButtons: [ButtonModel] = [] @Published var moreButton: [ButtonModel] = [] @Published var verticalButtons: [ButtonModel] = [] init(){ horizontalButtons = horizontalSamples moreButton = [mer] verticalButtons = veticalSamples } } //MARK: Buttons extension FloatingToolbarParentViewModel{ //MARK: SAMPLES fill in with your data var identify:ButtonModel {ButtonModel(label: "Identify", imageName: "arrow.up.backward", onClick: {print(#function " Identfy")}, colorSettings: .white)} var tiltak:ButtonModel {ButtonModel(label: "Tiltak", imageName: "scissors", onClick: {print(#function " Tiltak")}, colorSettings: .white)} var tegn:ButtonModel { ButtonModel(label: "Tegn", imageName: "pencil", onClick: {print(#function " Tegn")}, colorSettings: .white)} var bestand:ButtonModel {ButtonModel(label: "Bestand", imageName: "leaf", onClick: {print(#function " Identfy")}, colorSettings: .red)} var mer:ButtonModel {ButtonModel(label: "Mer", imageName: "ellipsis.circle", onClick: {print(#function " Mer")}, colorSettings: .red)} var kart:ButtonModel {ButtonModel(label: "Kart", imageName: "map.fill", onClick: {print(#function " Kart")}, colorSettings: .white)} var posisjon:ButtonModel {ButtonModel(label: "Posisjon", imageName: "magnifyingglass", onClick: {print(#function " Posisjon")}, colorSettings: .white)} var spor:ButtonModel {ButtonModel(label: "Spor", imageName: "circle.fill", onClick: {print(#function " Spor")}, colorSettings: .red)} var horizontalSamples :[ButtonModel] {[identify,tiltak,tegn,bestand]} var veticalSamples :[ButtonModel] {[kart,posisjon,spor]} }

The rest of the code to get the sample going is below. It isn't really needed but it will give you a working product

struct FloatingToolbarParentView: View { @State var region: MKCoordinateRegion = .init() @StateObject var vm: FloatingToolbarParentViewModel = .init() var body: some View { ZStack{ Map(coordinateRegion: $region) ToolbarOverlayView( horizontalButtons: $vm.horizontalButtons, cornerButton: $vm.moreButton, verticalButtons: $vm.verticalButtons) } } } struct ToolbarOverlayView: View{ @State var buttonSize: CGSize = .zero @Binding var horizontalButtons: [ButtonModel] @Binding var cornerButton: [ButtonModel] @Binding var verticalButtons: [ButtonModel] var body: some View{ GeometryReader{ geo in VStack{ HStack{ Spacer() VStack{ Spacer() FloatingToolbarView(buttons: $verticalButtons, buttonSize: buttonSize, direction: .vertical) } } Spacer() HStack{ Spacer() FloatingToolbarView(buttons: $horizontalButtons, buttonSize: buttonSize) FloatingToolbarView(buttons: $cornerButton, buttonSize: buttonSize) } //Adjust the button size on appear and when the orientation changes .onAppear(perform: { setButtonSize(size: geo.size) }) .onChange(of: geo.size.width, perform: { new in setButtonSize(size: geo.size) }) } } } //Sets the button size using and minimum and maximum values accordingly //landscape and portrait have oppositive min and max func setButtonSize(size: CGSize){ buttonSize = CGSize(width: min(size.width, size.height) * 0.15, height: max(size.width, size.height) * 0.1) } } //Toolbar group for an array of butons struct FloatingToolbarView: View { @Binding var buttons :[ButtonModel] let buttonSize: CGSize var direction: Direction = .horizontal var body: some View { Group{ switch direction { case .horizontal: HStack(spacing: 0){ ForEach($buttons){$button in FloatingToolbarButtonView(model: $button, size: buttonSize) } } case .vertical: VStack(spacing: 0){ ForEach($buttons){$button in FloatingToolbarButtonView(model: $button, size: buttonSize) } } } } } enum Direction{ case horizontal case vertical } } @available(iOS 15.0, *) struct FloatingToolbarParentView_Previews: PreviewProvider { static var previews: some View { FloatingToolbarParentView() FloatingToolbarParentView().previewInterfaceOrientation(.landscapeLeft) } } //Holds Button Color information //You havent provided much info on this so I assume that you are setting the colors somewhere struct ButtonColorSettings{ var labelNormal: Color var imageNormal: Color var backgroundNormal: Color //Sample Color configuration per image static var white = ButtonColorSettings(labelNormal: .white, imageNormal: .white, backgroundNormal: .black.opacity(0.5)) static var red = ButtonColorSettings(labelNormal: .black, imageNormal: .red, backgroundNormal: .white) }

CodePudding user response：

Have you tried putting .contentShape(Rectangle()) on the whole VStack inside the Button or on the button itself? That should probably solve it.