es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

SwiftUI: El botón dentro de una vista de colección personalizada no es completamente pulsable.

Tengo un conjunto de botones para mostrar al usuario y utilicé CollectionView para alinear los botones. Cada botón es un Vstack con componentes de imagen y texto. El toque es reactivo solo en la imagen pero no en el texto y el espacio de relleno alrededor.

Estoy buscando solucionar esto para que sea reactivo en todo el botón. Encontré sugerencias:
– Configurar ContentShape como un rectángulo y no funcionó.
– Usar Hstack para insertar espacios a la izquierda y derecha del texto, pero eso tampoco funcionó.

Código de muestra:
ToolBarItem:

var body: some View {
    VStack {

        Button(action: {

            // Delegate event to caller/parent view
            self.onClickAction(self.toolBarItem)

            }) {

            VStack {
                HStack {
                    Spacer()
                    Image(self.toolBarItem.selectedBackgroundImage)
                    .renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .padding(EdgeInsets(top: 5, leading: 3, bottom: 0, trailing: 3))
                    .frame(width: CGFloat(self.toolBarItem.cellWidth * 0.60),
                           height: CGFloat(self.toolBarItem.cellHeight * 0.60))
                    Spacer()
                }
               .contentShape(Rectangle())


                HStack {
                  Spacer()
                  Text(self.toolBarMenuInfo.specialSelectedName)
                    .foregroundColor(Color.red)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 5, trailing: 0))
                  Spacer()
                }
                 .contentShape(Rectangle())
            }
            .frame(width: CGFloat(self.toolBarItem.cellWidth),
                               height: CGFloat(self.toolBarItem.cellHeight))
            .background(Color.blue.opacity(0.5))
            }
    }
}

El ToolBarItem anterior se coloca dentro de la vista de colección (Objeto personalizado creado por mí) según sea necesario. Consulte el adjunto y el toque ocurre solo en la imagen rodeada por una marca verde.

¿Alguien ha tenido un problema similar? Se agradece cualquier respuesta.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema está en la forma de contenido del VStack. En lugar de establecer la forma de contenido de cada vista secundaria, puedes establecer la forma de contenido del VStack en sí mismo para que toda el área del botón reaccione a los toques.

    Reemplaza los modificadores .contentShape(Rectangle()) en los HStacks por .contentShape(Rectangle()) en el VStack:

    VStack {
        HStack {
            Spacer()
            Image(self.toolBarItem.selectedBackgroundImage)
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .padding(EdgeInsets(top: 5, leading: 3, bottom: 0, trailing: 3))
                .frame(width: CGFloat(self.toolBarItem.cellWidth * 0.60),
                        height: CGFloat(self.toolBarItem.cellHeight * 0.60))
            Spacer()
        }
        .contentShape(Rectangle())
    
    
        HStack {
            Spacer()
            Text(self.toolBarMenuInfo.specialSelectedName)
                .foregroundColor(Color.red)
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 5, trailing: 0))
            Spacer()
        }
        .contentShape(Rectangle())
    }
    .frame(width: CGFloat(self.toolBarItem.cellWidth),
            height: CGFloat(self.toolBarItem.cellHeight))
    .background(Color.blue.opacity(0.5))
    .contentShape(Rectangle())
    

    Esto debería hacer que todo el VStack reaccione a los toques. ¡Avísame si esto funciona!

Comments are closed.