gtk.list_view.ListView presents a large dynamic list of items.

gtk.list_view.ListView uses its factory to generate one row widget for each visible item and shows them in a linear display, either vertically or horizontally.

The gtk.list_view.ListView.showSeparators property offers a simple way to display separators between the rows.

gtk.list_view.ListView allows the user to select items according to the selection characteristics of the model. For models that allow multiple selected items, it is possible to turn on _rubberband selection_, using gtk.list_view.ListView.enableRubberband.

If you need multiple columns with headers, see gtk.column_view.ColumnView.

To learn more about the list widget framework, see the overview.

An example of using gtk.list_view.ListView:

static void
setup_listitem_cb (GtkListItemFactory *factory,
                   GtkListItem        *list_item)
{
  GtkWidget *image;

  image = gtk_image_new ();
  gtk_image_set_icon_size (GTK_IMAGE (image), GTK_ICON_SIZE_LARGE);
  gtk_list_item_set_child (list_item, image);
}

static void
bind_listitem_cb (GtkListItemFactory *factory,
                  GtkListItem        *list_item)
{
  GtkWidget *image;
  GAppInfo *app_info;

  image = gtk_list_item_get_child (list_item);
  app_info = gtk_list_item_get_item (list_item);
  gtk_image_set_from_gicon (GTK_IMAGE (image), g_app_info_get_icon (app_info));
}

static void
activate_cb (GtkListView  *list,
             guint         position,
             gpointer      unused)
{
  GAppInfo *app_info;

  app_info = g_list_model_get_item (G_LIST_MODEL (gtk_list_view_get_model (list)), position);
  g_app_info_launch (app_info, NULL, NULL, NULL);
  g_object_unref (app_info);
}

...

  model = create_application_list ();

  factory = gtk_signal_list_item_factory_new ();
  g_signal_connect (factory, "setup", G_CALLBACK (setup_listitem_cb), NULL);
  g_signal_connect (factory, "bind", G_CALLBACK (bind_listitem_cb), NULL);

  list = gtk_list_view_new (GTK_SELECTION_MODEL (gtk_single_selection_new (model)), factory);

  g_signal_connect (list, "activate", G_CALLBACK (activate_cb), NULL);

  gtk_scrolled_window_set_child (GTK_SCROLLED_WINDOW (sw), list);

CSS nodes

listview[.separators][.rich-list][.navigation-sidebar][.data-table]
├── row[.activatable]
│
├── row[.activatable]
│
┊
╰── [rubberband]

gtk.list_view.ListView uses a single CSS node named listview. It may carry the .separators style class, when gtk.list_view.ListView.showSeparators property is set. Each child widget uses a single CSS node named row. If the gtk.list_item.ListItem.activatable property is set, the corresponding row will have the .activatable style class. For rubberband selection, a node with name rubberband is used.

The main listview node may also carry style classes to select the style of list presentation: .rich-list, .navigation-sidebar or .data-table.

Accessibility

gtk.list_view.ListView uses the gtk.types.AccessibleRole.List role, and the list items use the gtk.types.AccessibleRole.ListItem role.

Fluent builder implementation template for gtk.list_view.ListView

Fluent builder for gtk.list_view.ListView