Блог

У меня есть SwiftUI List на iOS14.3 (Xcode12.3), и внутри его ячеек я хочу, чтобы Menu всплывающее окно появлялось, когда пользователь нажимает на кнопку. Кроме того, в этих ячейках есть onTapGesture и проблема в том, что этот жест также запускается при нажатии кнопки меню.

Пример:

 List {
    HStack {
        Text("Cell content")
        Spacer()
        // Triggers also onTapGesture of cell
        Menu(content: {
            Button(action: { }) {
                Text("Menu Item 1")
                Image(systemName: "command")
            }
            Button(action: { }) {
                Text("Menu Item 2")
                Image(systemName: "option")
            }
            Button(action: { }) {
                Text("Menu Item 3")
                Image(systemName: "shift")
            }
        }) {
            Image(systemName: "ellipsis")
                .imageScale(.large)
                .padding()
        }
    }
    .background(Color(.systemBackground))
    .onTapGesture {
        print("Cell tapped")
    }
}
 

Если вы нажмете на изображение с многоточием, откроется меню, которое также "Cell tapped" будет выведено на консоль. Это проблема для меня, потому что в моем примере с реальным миром я сворачиваю ячейку жестом касания и, конечно, я не хочу, чтобы это происходило, когда пользователь нажимает кнопку меню.

Я обнаружил, что при длительном нажатии на кнопку жест не срабатывает. Но, на мой взгляд, это неприемлемый UX, мне потребовалось некоторое время, чтобы понять это самому.

Я также заметил, что когда я заменяю Menu на обычный Button , то жест ячейки не срабатывает при нажатии (только с BorderlessButtonStyle помощью или PlainButtonStyle , в противном случае он вообще не активен). Но я не знаю, как открыть меню из его действия.

 List {
    HStack {
        Text("Cell content")
        Spacer()
        // Does not trigger cells onTapGesture, but how to open Menu from action?
        Button(action: { print("Button tapped") }) {
            Image(systemName: "ellipsis")
                .imageScale(.large)
                .padding()
        }
        .buttonStyle(BorderlessButtonStyle())
    }
    .background(Color(.systemBackground))
    .onTapGesture {
        print("Cell tapped")
    }
}
 

Кроме того, вы можете переопределить меню onTapGesture :

 struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Text("Cell content")
                Spacer()
                Menu(content: {
                    Button(action: {}) {
                        Text("Menu Item 1")
                        Image(systemName: "command")
                    }
                    Button(action: {}) {
                        Text("Menu Item 2")
                        Image(systemName: "option")
                    }
                    Button(action: {}) {
                        Text("Menu Item 3")
                        Image(systemName: "shift")
                    }
                }) {
                    Image(systemName: "ellipsis")
                        .imageScale(.large)
                        .padding()
                }
                .onTapGesture {} // override here
            }
            .contentShape(Rectangle())
            .onTapGesture {
                print("Cell tapped")
            }
        }
    }
}
 

Кроме того, нет необходимости использовать .background(Color(.systemBackground)) для нажатия на разделители. Это не очень гибко — что, если вы хотите изменить цвет фона?

Вы можете использовать contentShape вместо:

 .contentShape(Rectangle())
 

Я не уверен, является ли это ошибкой или ожидаемым поведением, но вместо того, чтобы бороться с этим, я бы рекомендовал избегать такого перекрытия (потому что даже при сегодняшнем успехе он может перестать работать в разных системах / обновлениях).

Вот возможное решение (протестировано с Xcode 12.1 / iOS 14.1)

     List {
        HStack {

            // row content area  
            HStack {
                Text("Cell content")
                Spacer()
            }
            .background(Color(.systemBackground)) // for tap on spacer area
            .onTapGesture {
                print("Cell tapped")
            }

            // menu area
            Menu(content: {
                Button(action: { }) {
                    Text("Menu Item 1")
                    Image(systemName: "command")
                }
                Button(action: { }) {
                    Text("Menu Item 2")
                    Image(systemName: "option")
                }
                Button(action: { }) {
                    Text("Menu Item 3")
                    Image(systemName: "shift")
                }
            }) {
                Image(systemName: "ellipsis")
                    .imageScale(.large)
                    .padding()
            }
        }
    }