[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 property@Gtk.ListView:show-separators 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 property@Gtk.ListView:enable-rubberband.

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

To learn more about the list widget framework, see the

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 property@Gtk.ListView:show-separators 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 for [gtk.list_view.ListView]