forked from AuroraMiddleware/gtk
Merge branch 'ebassi/list-doc-links' into 'main'
docs: Add links to the list widgets table See merge request GNOME/gtk!5210
This commit is contained in:
commit
dc168767b0
@ -24,10 +24,10 @@ you should be aware of what they refer to. These are often generic terms that
|
||||
have a specific meaning in this context.
|
||||
|
||||
**_Views_** or **_list widgets_** are the widgets that hold and manage the lists.
|
||||
Examples of these widgets would be `GtkListView` or `GtkGridView`.
|
||||
Examples of these widgets would be [`class@Gtk.ListView`] or [`class@Gtk.GridView`].
|
||||
|
||||
Views display data from a **_model_**. A model is a `GListModel` and models can
|
||||
be provided in 3 ways or combinations thereof:
|
||||
Views display data from a **_model_**. A model is a [`iface@Gio.ListModel`] and
|
||||
models can be provided in 3 ways or combinations thereof:
|
||||
|
||||
* Many list models implementations already exist. There are models that provide
|
||||
specific data, like `GtkDirectoryList`. And there are models like `GListStore`
|
||||
@ -42,7 +42,8 @@ be provided in 3 ways or combinations thereof:
|
||||
The same model can be used in multiple different views and wrapped with
|
||||
multiple different models at once.
|
||||
|
||||
The elements in a model are called **_items_**. All items are `GObjects`.
|
||||
The elements in a model are called **_items_**. All items are
|
||||
[`class@GObject.Object`] instances.
|
||||
|
||||
Every item in a model has a **_position_** which is the unsigned integer that
|
||||
describes where in the model the item is located. The first item in a model is
|
||||
@ -56,13 +57,13 @@ with models. Oftentimes some things are really hard to do one way but very easy
|
||||
the other way.
|
||||
|
||||
The other important part of a view is a **_factory_**. Each factory is
|
||||
a `GtkListItemFactory` implementation that takes care of mapping the items
|
||||
of the model to widgets that can be shown in the view.
|
||||
a [`class@Gtk.ListItemFactory`] implementation that takes care of mapping the
|
||||
items of the model to widgets that can be shown in the view.
|
||||
|
||||
The way factories do this is by creating a **_listitem_** for each item that
|
||||
is currently in use. Listitems are always `GtkListItem` objects. They are only
|
||||
ever created by GTK and provide information about what item they are meant
|
||||
to display.
|
||||
is currently in use. List items are always [`class@Gtk.ListItem`] instances.
|
||||
They are only ever created by GTK and provide information about what item they
|
||||
are meant to display.
|
||||
|
||||
Different factory implementations use various different methods to allow
|
||||
developers to add the right widgets to listitems and to link those widgets
|
||||
@ -71,29 +72,30 @@ for the data displayed, the programming language and development environment
|
||||
is an important task that can simplify setting up the view tremendously.
|
||||
|
||||
Views support selections via a **_selection model_**. A selection model is an
|
||||
implementation of the `GtkSelectionModel` interface on top of the `GListModel`
|
||||
interface that allows marking each item in a model as either selected or not
|
||||
selected. Just like regular models, this can be implemented either by
|
||||
implementing `GtkSelectionModel` directly or by wrapping a model with one of
|
||||
the GTK models provided for this purposes, such as `GtkNoSelection`
|
||||
or `GtkSingleSelection`.
|
||||
implementation of the [`iface@Gtk.SelectionModel`] interface on top of the
|
||||
[`iface@Gio.ListModel`] interface that allows marking each item in a model as either
|
||||
selected or not selected. Just like regular models, this can be implemented
|
||||
either by implementing `GtkSelectionModel` directly or by wrapping a model with
|
||||
one of the GTK models provided for this purposes, such as [`class@Gtk.NoSelection`]
|
||||
or [`class@Gtk.SingleSelection`].
|
||||
|
||||
The behavior of selection models - ie which items they allow selecting and
|
||||
what effect this has on other items - is completely up to the selection model.
|
||||
As such, single-selections, multi-selections or sharing selection state between
|
||||
different selection models and/or views is possible. The selection state of an
|
||||
item is exposed in the listitem via the `GtkListItem:selected` property.
|
||||
item is exposed in the listitem via the [`property@Gtk.ListItem:selected`] property.
|
||||
|
||||
Views and listitems also support activation. Activation means that double
|
||||
clicking or pressing enter while inside a focused row will cause the view
|
||||
to emit and activation signal such as `GtkListView::activate`. This provides
|
||||
an easy way to set up lists, but can also be turned off on listitems if undesired.
|
||||
to emit and activation signal such as [`signal@Gtk.ListView::activate`]. This
|
||||
provides an easy way to set up lists, but can also be turned off on listitems
|
||||
if undesired.
|
||||
|
||||
Both selections and activation are supported among other things via widget
|
||||
[actions](#actions-overview). This allows developers to add widgets to their
|
||||
lists that cause selections to change or to trigger activation via
|
||||
the `GtkActionable` interface. For a list of all supported actions see the
|
||||
relevant documentation.
|
||||
the [`iface@Gtk.Actionable`] interface. For a list of all supported actions see
|
||||
the relevant documentation.
|
||||
|
||||
## Behind the scenes
|
||||
|
||||
@ -101,12 +103,14 @@ While for short lists it is not a problem to instantiate widgets for every
|
||||
item in the model, once lists grow to thousands or millions of elements, this
|
||||
gets less feasible. Because of this, the views only create a limited amount of
|
||||
listitems and recycle them by binding them to new items. In general, views try
|
||||
to keep listitems available only for the items that can actually be seen on screen.
|
||||
to keep listitems available only for the items that can actually be seen on
|
||||
screen.
|
||||
|
||||
While this behavior allows views to scale effortlessly to huge lists, it has a
|
||||
few implication on what can be done with views. For example, it is not possible
|
||||
to query a view for a listitem used for a certain position - there might not be
|
||||
one and even if there is, that listitem might soon be recycled for a new position.
|
||||
one and even if there is, that listitem might soon be recycled for a new
|
||||
position.
|
||||
|
||||
It is also important that developers save state they care about in the item and
|
||||
do not rely on the widgets they created as those widgets can be recycled for a
|
||||
@ -114,13 +118,13 @@ new position at any time causing any state to be lost.
|
||||
|
||||
Another important requirement for views is that they need to know which items
|
||||
are not visible so they can be recycled. Views achieve that by implementing
|
||||
the `GtkScrollable` interface and expecting to be placed directly into
|
||||
a `GtkScrolledWindow`.
|
||||
the [`iface@Gtk.Scrollable`] interface and expecting to be placed directly into
|
||||
a [`class@Gtk.ScrolledWindow`].
|
||||
|
||||
Of course, if you are only using models with few items, this is not important
|
||||
and you can treat views like any other widget. But if you use large lists and
|
||||
your performance suffers, you should be aware of this. Views also allow tuning
|
||||
the number of listitems they create such as with gtk_grid_view_set_max_columns(),
|
||||
the number of listitems they create such as with [`method@Gtk.GridView.set_max_columns`],
|
||||
and developers running into performance problems should definitely study the
|
||||
tradeoffs of those and experiment with them.
|
||||
|
||||
@ -128,23 +132,23 @@ tradeoffs of those and experiment with them.
|
||||
|
||||
GTK offers a wide variety of wrapping models which change or supplement an
|
||||
existing model (or models) in some way. But when it comes to storing your
|
||||
actual data, there are only a few ready-made choices available: `GListStore`
|
||||
and `GtkStringList`.
|
||||
actual data, there are only a few ready-made choices available: [`class@Gio.ListStore`]
|
||||
and [`class@Gtk.StringList`].
|
||||
|
||||
GListStore is backed by a balanced tree and has performance characteristics
|
||||
`GListStore` is backed by a balanced tree and has performance characteristics
|
||||
that are expected for that data structure. It works reasonably well for dataset
|
||||
sizes in the 1,000,000 range, and can handle insertions and deletions. It uses
|
||||
a cached iter to make linear access to the items fast.
|
||||
|
||||
GtkStringList is not a general store - it can only handle strings. It is
|
||||
`GtkStringList` is not a general store - it can only handle strings. It is
|
||||
backed by an dynamically allocated array and has performance characteristics
|
||||
that are expected for that data structure. GtkStringList is a good fit for any
|
||||
that are expected for that data structure. `GtkStringList` is a good fit for any
|
||||
place where you would otherwise use `char*[]` and works best if the dataset
|
||||
is not very dynamic.
|
||||
|
||||
If these models don't fit your use case or scalability requirements, you
|
||||
should make a custom `GListModel`. It is a small interface and not very hard
|
||||
to implement.
|
||||
should make a custom `GListModel` implementation. It is a small interface and
|
||||
not very hard to implement.
|
||||
|
||||
For asymptotic performance comparisons between tree- and array-based
|
||||
implementations, see this
|
||||
@ -159,16 +163,17 @@ interface provided.
|
||||
|
||||
However, GTK provides functionality to make trees look and behave like lists
|
||||
for the people who still want to display lists. This is achieved by using
|
||||
the `GtkTreeListModel` model to flatten a tree into a list. The `GtkTreeExpander`
|
||||
widget can then be used inside a listitem to allow users to expand and collapse
|
||||
rows and provide a similar experience to `GtkTreeView`.
|
||||
the [`class@Gtk.TreeListModel`] model to flatten a tree into a list. The
|
||||
[`class@Gtk.TreeExpander`] widget can then be used inside a listitem to allow
|
||||
users to expand and collapse rows and provide a similar experience to
|
||||
`GtkTreeView`.
|
||||
|
||||
Developers should refer to those objects' API reference for more discussion
|
||||
on the topic.
|
||||
|
||||
## List styles
|
||||
|
||||
One of the advantages of the new list widgets over `GtkTreeViews` and cell
|
||||
One of the advantages of the new list widgets over `GtkTreeView` and cell
|
||||
renderers is that they are fully themable using GTK CSS. This provides a
|
||||
lot of flexibility. The themes that ship with GTK provide a few predefined
|
||||
list styles that can be used in many situations:
|
||||
@ -177,17 +182,17 @@ list styles that can be used in many situations:
|
||||
|
||||
This style of list is low density, spacious and uses an outline focus ring.
|
||||
It is suitable for lists of controls, e.g. in preference dialogs or
|
||||
settings panels. Use the .rich-list style class.
|
||||
settings panels. Use the `.rich-list` style class.
|
||||
|
||||
![Navigation sidebar](navigation-sidebar.png)
|
||||
|
||||
This style of list is medium density, using a full background to indicate
|
||||
focus and selection. Use the .navigation-sidebar style class.
|
||||
focus and selection. Use the `.navigation-sidebar` style class.
|
||||
|
||||
![Data table](data-table.png)
|
||||
|
||||
This style of list is a high density table, similar in style to a traditional
|
||||
treeview. Individual cells can be selectable and editable. Use the .data-table
|
||||
treeview. Individual cells can be selectable and editable. Use the `.data-table`
|
||||
style class.
|
||||
|
||||
## Comparison to GtkTreeView
|
||||
@ -210,7 +215,7 @@ was a rather complex interface for a tree data structure and `GListModel` was
|
||||
deliberately designed to be a simple data structure for lists only. (See
|
||||
[above](#displaying-trees)) for how to still do trees with this new model.)
|
||||
Another big change is that the new model allows for bulk changes via
|
||||
the `GListModel:items-changed` signal while `GtkTreeModel` only allows a single
|
||||
the `GListModel::items-changed` signal while `GtkTreeModel` only allows a single
|
||||
item to change at once. The goal here is of course to encourage implementation
|
||||
of custom list models.
|
||||
|
||||
@ -229,24 +234,24 @@ specialized requirements.
|
||||
Finally here's a quick list of equivalent functionality to look for when
|
||||
transitioning code for easy lookup:
|
||||
|
||||
| Old | New |
|
||||
| -------------------- | ------------------------------------ |
|
||||
| `GtkTreeModel` | `GListModel` |
|
||||
| `GtkTreePath` | `guint` position, `GtkTreeListRow` |
|
||||
| `GtkTreeIter` | `guint` position |
|
||||
| `GtkTreeRowReference`| `GObject` item |
|
||||
| `GtkListStore` | `GListStore` |
|
||||
| `GtkTreeStore` | `GtkTreeListModel`, `GtkTreeExpander`|
|
||||
| `GtkTreeSelection` | `GtkSelectionModel` |
|
||||
| `GtkTreeViewColumn` | `GtkColumnView` |
|
||||
| `GtkTreeView` | `GtkListView`, `GtkColumnView` |
|
||||
| `GtkCellView` | `GtkListItemWidget` |
|
||||
| `GtkComboBox` | `GtkDropDown` |
|
||||
| `GtkIconView` | `GtkGridView` |
|
||||
| `GtkTreeSortable` | `GtkColumnView` |
|
||||
| `GtkTreeModelSort` | `GtkSortListModel` |
|
||||
| `GtkTreeModelFilter` | `GtkFilterListModel` |
|
||||
| `GtkCellLayout` | `GtkListItemFactory` |
|
||||
| `GtkCellArea` | `GtkWidget` |
|
||||
| `GtkCellRenderer` | `GtkWidget` |
|
||||
| Old | New |
|
||||
| -------------------- | ------------------------------------------------------- |
|
||||
| `GtkTreeModel` | [`iface@Gio.ListModel`] |
|
||||
| `GtkTreePath` | `guint` position, [`class@Gtk.TreeListRow`] |
|
||||
| `GtkTreeIter` | `guint` position |
|
||||
| `GtkTreeRowReference`| [`class@GObject.Object`] item |
|
||||
| `GtkListStore` | [`class@Gio.ListStore`] |
|
||||
| `GtkTreeStore` | [`class@Gtk.TreeListModel`], [`class@Gtk.TreeExpander`] |
|
||||
| `GtkTreeSelection` | [`iface@Gtk.SelectionModel`] |
|
||||
| `GtkTreeViewColumn` | [`class@Gtk.ColumnView`] |
|
||||
| `GtkTreeView` | [`class@Gtk.ListView`], [`class@Gtk.ColumnView`] |
|
||||
| `GtkCellView` | [`class@Gtk.ListItem`] |
|
||||
| `GtkComboBox` | [`class@Gtk.DropDown`] |
|
||||
| `GtkIconView` | [`class@Gtk.GridView`] |
|
||||
| `GtkTreeSortable` | [`class@Gtk.ColumnView`] |
|
||||
| `GtkTreeModelSort` | [`class@Gtk.SortListModel`] |
|
||||
| `GtkTreeModelFilter` | [`class@Gtk.FilterListModel`] |
|
||||
| `GtkCellLayout` | [`class@Gtk.ListItemFactory`] |
|
||||
| `GtkCellArea` | [`class@Gtk.Widget`] |
|
||||
| `GtkCellRenderer` | [`class@Gtk.Widget`] |
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user