14. CellRenderer-komponenter

Gtk.CellRenderer-komponenter används för att visa information i komponenter så som Gtk.TreeView eller Gtk.ComboBox. De arbetar nära med de associerade komponenterna och är väldigt kraftfulla, med många konfigurationsalternativ för att visa en stor mängd data på olika sätt. Det finns sju Gtk.CellRenderer-komponenter som kan användas för olika syften:

14.1. CellRendererText

En Gtk.CellRendererText renderar en given text i en cell, med det typsnitt, färg och stilinformation som ges av dess egenskaper. Texten kommer elliptiseras om den är för lång och egenskapen ”ellipsize” tillåter det.

Som standard är text i Gtk.CellRendererText-komponenter inte redigerbar. Detta kan ändras genom att ställa in värdet för egenskapen ”editable” till True:

cell.set_property("editable", True)

Du kan sedan ansluta till ”edited”-signalen och uppdatera din Gtk.TreeModel enligt det.

14.1.1. Exempel

_images/cellrenderertext_example.png 
 1import gi
 2
 3gi.require_version("Gtk", "3.0")
 4from gi.repository import Gtk
 5
 6
 7class CellRendererTextWindow(Gtk.Window):
 8    def __init__(self):
 9        super().__init__(title="CellRendererText Example")
10
11        self.set_default_size(200, 200)
12
13        self.liststore = Gtk.ListStore(str, str)
14        self.liststore.append(["Fedora", "https://fedoraproject.org/"])
15        self.liststore.append(["Slackware", "http://www.slackware.com/"])
16        self.liststore.append(["Sidux", "http://sidux.com/"])
17
18        treeview = Gtk.TreeView(model=self.liststore)
19
20        renderer_text = Gtk.CellRendererText()
21        column_text = Gtk.TreeViewColumn("Text", renderer_text, text=0)
22        treeview.append_column(column_text)
23
24        renderer_editabletext = Gtk.CellRendererText()
25        renderer_editabletext.set_property("editable", True)
26
27        column_editabletext = Gtk.TreeViewColumn(
28            "Editable Text", renderer_editabletext, text=1
29        )
30        treeview.append_column(column_editabletext)
31
32        renderer_editabletext.connect("edited", self.text_edited)
33
34        self.add(treeview)
35
36    def text_edited(self, widget, path, text):
37        self.liststore[path][1] = text
38
39
40win = CellRendererTextWindow()
41win.connect("destroy", Gtk.main_quit)
42win.show_all()
43Gtk.main()

14.2. CellRendererToggle

Gtk.CellRendererToggle renderar en växlingsknapp i en cell. Knappen ritas som en radioknapp eller en kryssruta, beroende på egenskapen ”radio”. Då den aktiveras sänder den signalen ”toggled”.

Då en Gtk.CellRendererToggle kan ha två tillstånd, aktiv och inte aktiv, så kommer du mest troligt vilja binda egenskapen ”active” på cellrenderaren till ett booleskt värde i modellen, och därigenom få kryssrutan att motsvara tillståndet för modellen.

14.2.1. Exempel

_images/cellrenderertoggle_example.png 
 1import gi
 2
 3gi.require_version("Gtk", "3.0")
 4from gi.repository import Gtk
 5
 6
 7class CellRendererToggleWindow(Gtk.Window):
 8    def __init__(self):
 9        super().__init__(title="CellRendererToggle Example")
10
11        self.set_default_size(200, 200)
12
13        self.liststore = Gtk.ListStore(str, bool, bool)
14        self.liststore.append(["Debian", False, True])
15        self.liststore.append(["OpenSuse", True, False])
16        self.liststore.append(["Fedora", False, False])
17
18        treeview = Gtk.TreeView(model=self.liststore)
19
20        renderer_text = Gtk.CellRendererText()
21        column_text = Gtk.TreeViewColumn("Text", renderer_text, text=0)
22        treeview.append_column(column_text)
23
24        renderer_toggle = Gtk.CellRendererToggle()
25        renderer_toggle.connect("toggled", self.on_cell_toggled)
26
27        column_toggle = Gtk.TreeViewColumn("Toggle", renderer_toggle, active=1)
28        treeview.append_column(column_toggle)
29
30        renderer_radio = Gtk.CellRendererToggle()
31        renderer_radio.set_radio(True)
32        renderer_radio.connect("toggled", self.on_cell_radio_toggled)
33
34        column_radio = Gtk.TreeViewColumn("Radio", renderer_radio, active=2)
35        treeview.append_column(column_radio)
36
37        self.add(treeview)
38
39    def on_cell_toggled(self, widget, path):
40        self.liststore[path][1] = not self.liststore[path][1]
41
42    def on_cell_radio_toggled(self, widget, path):
43        selected_path = Gtk.TreePath(path)
44        for row in self.liststore:
45            row[2] = row.path == selected_path
46
47
48win = CellRendererToggleWindow()
49win.connect("destroy", Gtk.main_quit)
50win.show_all()
51Gtk.main()

14.3. CellRendererPixbuf

En Gtk.CellRendererPixbuf kan användas för att rendera en bild i en cell. Den tillåter att rendera antingen en given Gdk.Pixbuf (satt via egenskapen ”pixbuf”) eller en namngiven ikon (satt via egenskapen ”icon-name”).

14.3.1. Exempel

_images/cellrendererpixbuf_example.png 
 1import gi
 2
 3gi.require_version("Gtk", "3.0")
 4from gi.repository import Gtk
 5
 6
 7class CellRendererPixbufWindow(Gtk.Window):
 8    def __init__(self):
 9        super().__init__(title="CellRendererPixbuf Example")
10
11        self.set_default_size(200, 200)
12
13        self.liststore = Gtk.ListStore(str, str)
14        self.liststore.append(["New", "document-new"])
15        self.liststore.append(["Open", "document-open"])
16        self.liststore.append(["Save", "document-save"])
17
18        treeview = Gtk.TreeView(model=self.liststore)
19
20        renderer_text = Gtk.CellRendererText()
21        column_text = Gtk.TreeViewColumn("Text", renderer_text, text=0)
22        treeview.append_column(column_text)
23
24        renderer_pixbuf = Gtk.CellRendererPixbuf()
25
26        column_pixbuf = Gtk.TreeViewColumn("Image", renderer_pixbuf, icon_name=1)
27        treeview.append_column(column_pixbuf)
28
29        self.add(treeview)
30
31
32win = CellRendererPixbufWindow()
33win.connect("destroy", Gtk.main_quit)
34win.show_all()
35Gtk.main()

14.4. CellRendererCombo

Gtk.CellRendererCombo renderar text i en cell som Gtk.CellRendererText från vilken den härletts. Men medan den senare erbjuder ett enkelt inmatningsfält för att redigera texten så erbjuder Gtk.CellRendererCombo en Gtk.ComboBox-komponent för att redigera texten. Värdena att visa i kombinationsrutan tas från den Gtk.TreeModel som anges i egenskapen ”model”.

Kombinationscellrenderaren tar hand om att lägga till en textcellrenderare till kombinationsrutan och ställer in den att visa kolumnen som anges av dess egenskap ”text-column”.

En Gtk.CellRendererCombo kan arbeta i två lägen. Den kan användas med eller utan en associerad Gtk.Entry-komponent, beroende på värdet på egenskapen ”has-entry”.

14.4.1. Exempel

_images/cellrenderercombo_example.png 
 1import gi
 2
 3gi.require_version("Gtk", "3.0")
 4from gi.repository import Gtk
 5
 6
 7class CellRendererComboWindow(Gtk.Window):
 8    def __init__(self):
 9        super().__init__(title="CellRendererCombo Example")
10
11        self.set_default_size(200, 200)
12
13        liststore_manufacturers = Gtk.ListStore(str)
14        manufacturers = ["Sony", "LG", "Panasonic", "Toshiba", "Nokia", "Samsung"]
15        for item in manufacturers:
16            liststore_manufacturers.append([item])
17
18        self.liststore_hardware = Gtk.ListStore(str, str)
19        self.liststore_hardware.append(["Television", "Samsung"])
20        self.liststore_hardware.append(["Mobile Phone", "LG"])
21        self.liststore_hardware.append(["DVD Player", "Sony"])
22
23        treeview = Gtk.TreeView(model=self.liststore_hardware)
24
25        renderer_text = Gtk.CellRendererText()
26        column_text = Gtk.TreeViewColumn("Text", renderer_text, text=0)
27        treeview.append_column(column_text)
28
29        renderer_combo = Gtk.CellRendererCombo()
30        renderer_combo.set_property("editable", True)
31        renderer_combo.set_property("model", liststore_manufacturers)
32        renderer_combo.set_property("text-column", 0)
33        renderer_combo.set_property("has-entry", False)
34        renderer_combo.connect("edited", self.on_combo_changed)
35
36        column_combo = Gtk.TreeViewColumn("Combo", renderer_combo, text=1)
37        treeview.append_column(column_combo)
38
39        self.add(treeview)
40
41    def on_combo_changed(self, widget, path, text):
42        self.liststore_hardware[path][1] = text
43
44
45win = CellRendererComboWindow()
46win.connect("destroy", Gtk.main_quit)
47win.show_all()
48Gtk.main()

14.5. CellRendererProgress

Gtk.CellRendererProgress renderar ett numeriskt värde som en förloppsindikator i en cell. Vidare kan den visa en text ovanpå förloppsindikatorn.

Procentvärdet för förloppsindikatorn kan ändras genom att ändra egenskapen ”value”. Liknande Gtk.ProgressBar så kan du aktivera aktivitetsläget genom att öka ”pulse”-egenskapen istället för ”value”-egenskapen.

14.5.1. Exempel

_images/cellrendererprogress_example.png 
 1import gi
 2
 3gi.require_version("Gtk", "3.0")
 4from gi.repository import Gtk, GLib
 5
 6
 7class CellRendererProgressWindow(Gtk.Window):
 8    def __init__(self):
 9        super().__init__(title="CellRendererProgress Example")
10
11        self.set_default_size(200, 200)
12
13        self.liststore = Gtk.ListStore(str, int, bool)
14        self.current_iter = self.liststore.append(["Sabayon", 0, False])
15        self.liststore.append(["Zenwalk", 0, False])
16        self.liststore.append(["SimplyMepis", 0, False])
17
18        treeview = Gtk.TreeView(model=self.liststore)
19
20        renderer_text = Gtk.CellRendererText()
21        column_text = Gtk.TreeViewColumn("Text", renderer_text, text=0)
22        treeview.append_column(column_text)
23
24        renderer_progress = Gtk.CellRendererProgress()
25        column_progress = Gtk.TreeViewColumn(
26            "Progress", renderer_progress, value=1, inverted=2
27        )
28        treeview.append_column(column_progress)
29
30        renderer_toggle = Gtk.CellRendererToggle()
31        renderer_toggle.connect("toggled", self.on_inverted_toggled)
32        column_toggle = Gtk.TreeViewColumn("Inverted", renderer_toggle, active=2)
33        treeview.append_column(column_toggle)
34
35        self.add(treeview)
36
37        self.timeout_id = GLib.timeout_add(100, self.on_timeout, None)
38
39    def on_inverted_toggled(self, widget, path):
40        self.liststore[path][2] = not self.liststore[path][2]
41
42    def on_timeout(self, user_data):
43        new_value = self.liststore[self.current_iter][1] + 1
44        if new_value > 100:
45            self.current_iter = self.liststore.iter_next(self.current_iter)
46            if self.current_iter is None:
47                self.reset_model()
48            new_value = self.liststore[self.current_iter][1] + 1
49
50        self.liststore[self.current_iter][1] = new_value
51        return True
52
53    def reset_model(self):
54        for row in self.liststore:
55            row[1] = 0
56        self.current_iter = self.liststore.get_iter_first()
57
58
59win = CellRendererProgressWindow()
60win.connect("destroy", Gtk.main_quit)
61win.show_all()
62Gtk.main()

14.6. CellRendererSpin

Gtk.CellRendererSpin renderar text i en cell som Gtk.CellRendererText från vilken den härletts. Men medan den senare erbjuder ett enkelt inmatningsfält för att redigera texten så erbjuder Gtk.CellRendererSpin en Gtk.SpinButton-komponent. Detta betyder förstås att texten måste gå att tolka som ett flyttal.

Intervallet för stegningsrutan tas från justeringsegenskapen för cellrenderaren, vilken kan ställas in explicit eller mappas till en kolumn i trädmodellen, som alla egenskaper för cellrenderare. Gtk.CellRendererSpin har också egenskaper för steghöjden och antalet siffror att visa.

14.6.1. Exempel

_images/cellrendererspin_example.png 
 1import gi
 2
 3gi.require_version("Gtk", "3.0")
 4from gi.repository import Gtk
 5
 6
 7class CellRendererSpinWindow(Gtk.Window):
 8    def __init__(self):
 9        super().__init__(title="CellRendererSpin Example")
10
11        self.set_default_size(200, 200)
12
13        self.liststore = Gtk.ListStore(str, int)
14        self.liststore.append(["Oranges", 5])
15        self.liststore.append(["Apples", 4])
16        self.liststore.append(["Bananas", 2])
17
18        treeview = Gtk.TreeView(model=self.liststore)
19
20        renderer_text = Gtk.CellRendererText()
21        column_text = Gtk.TreeViewColumn("Fruit", renderer_text, text=0)
22        treeview.append_column(column_text)
23
24        renderer_spin = Gtk.CellRendererSpin()
25        renderer_spin.connect("edited", self.on_amount_edited)
26        renderer_spin.set_property("editable", True)
27
28        adjustment = Gtk.Adjustment(
29            value=0,
30            lower=0,
31            upper=100,
32            step_increment=1,
33            page_increment=10,
34            page_size=0,
35        )
36        renderer_spin.set_property("adjustment", adjustment)
37
38        column_spin = Gtk.TreeViewColumn("Amount", renderer_spin, text=1)
39        treeview.append_column(column_spin)
40
41        self.add(treeview)
42
43    def on_amount_edited(self, widget, path, value):
44        self.liststore[path][1] = int(value)
45
46
47win = CellRendererSpinWindow()
48win.connect("destroy", Gtk.main_quit)
49win.show_all()
50Gtk.main()