我们如何从 ListView 中进行多选？我看到它可以在桌面上运行，但不能在手机上运行

Posted 2023-04-15

【中文标题】我们如何从 ListView 中进行多选？我看到它可以在桌面上运行，但不能在手机上运行

【英文标题】：How do we multi-select from a ListView? I see it working on desktop but not on phone

【发布时间】：2021-10-15 09:57:51

【问题描述】：

我发现this tip 在使用 CharmListView 时如何公开 SelectionModel 以进行多选，但即使使用普通的 ListView，我的问题也是一样的。

如下所示，我可以选择（突出显示）多个列表项。在鼠标单击时在桌面上使用 CTRL 或 SHIFT，我可以选择多个项目，而不是一次只选择一个。当我在手机上进行测试时，当我选择一个，然后是另一个时，我看到的仍然只有单一选择行为。

我们如何在移动设备上多选列表中的项目？

@FXML
private CharmListView<Widget, Integer> myWidgetListView;

public void initialize() 

    Platform.runLater(() -> 
        ListView<Widget> innerList = (ListView<Widget>) myWidgetListView.lookup(".list-view");
        innerList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    );

【问题讨论】：

你打算在移动设备上使用“Ctrl”/“Shift”吗？我的意思是，多选可能会起作用，但使用的方法与在桌面上的方法截然不同：您可能希望逐个支持所选项目并将多选报告回 listView。

@JoséPereda 在桌面上具有多选功能，当我们选择一个列表项时，控件会更改该项的颜色。再次选择相同的颜色会恢复颜色，确认它未被选中。我可以尝试为手机上的相同列表控件编写此行为，但接下来每个想要这样做的开发人员也将如此。如果控件本身被编码为这样会更好。我相信每个下一个开发者都会假设它已经像我一样工作了。如果更新文档以预先警告读者，这将节省人们的时间。

如果我没说错，您希望多选功能在移动设备上开箱即用，只需点击不同的项目？您将如何取消选择所有（再次点击）？您知道允许多选的移动应用程序吗？如果这是一个理想的功能，当然可以将它添加到 CharmListView，只要它是可行的并且不会混淆用户体验。

我在手机上搜索了一些支持多选列表的应用程序。两个文件系统浏览应用程序和一个电子邮件应用程序。一旦选择开始，其中两个会立即显示一个按钮/图标。按下它会将列表重置为未选择。第三个应用程序没有显示用于重置列表的 UX 控件。相反，我在手机上打手势“返回一个屏幕”，应用程序视图保持不变，但列表重置。另一个返回手势调用应用程序返回上一个视图。所以，我认为这取决于 Gluon 开发人员如何听取用户想要重置列表，然后使用列表的 API 来发出重置信号。

我确实看到 Google Files 使用长按来启动多选，而 AppBar 上的后退按钮或 X 按钮会取消它。无论如何，在移动设备上使用多选并没有统一的 UX 或手势，这绝对不符合 JavaFX for desktop 中对多选的定义。对于移动设备，需要自定义实现，可能是 CharmListView 的一部分，甚至是 OpenJFX 的一部分……现在它可以很容易地添加到您的代码中，您只需要设置一个标志来标识允许多选，并且对于每次单击您都不会处理该单元格的常规事件处理程序。

【参考方案1】：

我的多选列表工作正常。如果您在选择一个列表项后单击另一个列表项，则两者都保持突出显示。第二个选择不会取消选择第一个。您可以选择（突出显示）整个列表，一次选择一个列表项。对于已选择的任何列表项，再次选择它会取消选择它，而不会更改列表中其他人的选择状态。

这个解决方案是有效的，但还没有完成。这还没有阻止用户选择 CharmListView 的 Header 项目。此外，在选择其他项目时，其他已选择的其他项目将闪烁。它在桌面上比在 android 上更明显。如果有人可以帮助调整我在下面所做的以停止闪烁，那将有助于完成此解决方案。

public class MyPresenter extends GluonPresenter<MyWidgets> 

  @FXML
  private CharmListView<Widget, Integer> charmListView;

  private Set<Integer> selectedIndices = new HashSet<Integer>();

  public void initialize() 

    Platform.runLater(() -> 
      ListView<Widget> innerList = (ListView<Widget>) charmListView.lookup(".list-view");
      innerList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
      innerList.setOnMouseClicked((event) -> 
          int selectedIndex = innerList.getSelectionModel().getSelectedIndex();
          if(selectedIndices.contains(selectedIndex)) 
            selectedIndices.remove(selectedIndex);        
            innerList.getSelectionModel().clearSelection(selectedIndex);
                                     
          else 
            selectedIndices.add(selectedIndex);
          

          for(int index : selectedIndices)
            innerList.getSelectionModel().selectIndices(index);
      );
    );