[Python] Why does the titlebar crossfade transition work one way and not the other using...

In the first code example, there is a crossfade animation that happens between changes.

import sys
import gi

# Require specifically GTK 4.0 and Adwaita 1
gi.require_version('Gtk', '4.0')
gi.require_version('Adw', '1')

from gi.repository import Gtk, Adw, Gio, GLib, GObject

# XML User Interface Definition
UI_XML = """
<interface>
<requires lib="gtk" version="4.0"/>
<object class="AdwApplicationWindow" id="main_window">
<property name="default-width">700</property>
<property name="default-height">500</property>
<property name="title">Width Tracker</property>
<property name="content">
<object class="GtkBox">
<property name="orientation">vertical</property>

<!-- Top Header -->
<child>
<object class="AdwHeaderBar">
<property name="title-widget">
<!-- AdwViewSwitcherTitle adapts to show title or switcher based on width -->
<object class="AdwViewSwitcherTitle" id="switcher_title">
<property name="title">Test</property>
<property name="stack">stack</property>
<property name="subtitle">Adaptive Example</property>
</object>
</property>
</object>
</child>

<!-- Main Content Stack -->
<child>
<object class="AdwViewStack" id="stack">
<property name="vexpand">True</property>

<!-- Page 1 -->
<child>
<object class="AdwViewStackPage">
<property name="name">Test Page 1</property>
<property name="title">Test Page 1</property>
<property name="icon-name">org.gnome.Settings-display-symbolic</property>
<property name="child">
<object class="AdwStatusPage">
<property name="child">
<object class="AdwStatusPage">
<property name="title">Test Page 1</property>
<property name="description">Test Page 1</property>
</object>
</property>
</object>
</property>
</object>
</child>

<!-- Page 2 -->
<child>
<object class="AdwViewStackPage">
<property name="name">Test Page 2</property>
<property name="title">Test Page 2</property>
<property name="icon-name">dialog-information-symbolic</property>
<property name="child">
<object class="AdwStatusPage">
<property name="title">Test Page 2</property>
<property name="description">Test Page 2</property>
</object>
</property>
</object>
</child>

</object>
</child>

<!-- Bottom Switcher Bar (Hidden by default) -->
<child>
<object class="AdwViewSwitcherBar" id="switcher_bar">
<property name="stack">stack</property>
<property name="reveal">False</property>
</object>
</child>

</object>
</property>
</object>
</interface>
"""

class WidthTrackerApp(Adw.Application):
def __init__(self, **kwargs):
super().__init__(application_id='com.example.Test',
flags=Gio.ApplicationFlags.FLAGS_NONE,
**kwargs)

def do_activate(self):
builder = Gtk.Builder.new_from_string(UI_XML, -1)

self.window = builder.get_object('main_window')
self.switcher_title = builder.get_object('switcher_title')
self.switcher_bar = builder.get_object('switcher_bar')

self.window.set_application(self)


self.switcher_title.bind_property(
'title-visible',
self.switcher_bar,
'reveal',
GObject.BindingFlags.SYNC_CREATE
)

self.window.present()


if __name__ == '__main__':
app = WidthTrackerApp()
app.run(sys.argv)


That method looks to be deprecated. There is also a switch from wide buttons to narrow buttons that I don't like and that I don't seem to be able to control.

In the second code example, I am using a breakpoint, which stops the narrow buttons from showing in the titlebar, but I can't get the transition animations to work with this method.

import sys
import gi

# Require specifically GTK 4.0 and Adwaita 1
gi.require_version('Gtk', '4.0')
gi.require_version('Adw', '1')

from gi.repository import Gtk, Adw, Gio, GLib, GObject

# XML User Interface Definition
UI_XML = """
<interface>
<requires lib="gtk" version="4.0"/>
<object class="AdwApplicationWindow" id="main_window">
<property name="default-width">700</property>
<property name="default-height">500</property>
<property name="title">Test</property>

<!-- Breakpoint Mobile to Desktop -->
<child>
<object class="AdwBreakpoint">
<condition>max-width: 550px</condition>

<setter object="switcher_bar" property="reveal">True</setter>
<setter object="header_stack" property="visible-child-name">title_page</setter>
</object>
</child>

<property name="content">
<object class="GtkBox">
<property name="orientation">vertical</property>

<!-- Top Header -->
<child>
<object class="AdwHeaderBar">
<property name="title-widget">

<object class="GtkStack" id="header_stack">
<!-- ANIMATION -->
<property name="transition-type">crossfade</property>
<property name="transition-duration">250</property>

<child>
<object class="GtkStackPage">
<property name="name">switcher_page</property>
<property name="child">
<object class="AdwViewSwitcher">
<property name="stack">stack</property>
<property name="policy">wide</property>
</object>
</property>
</object>
</child>

<!-- Page 2: Mobile (Just Title) -->
<child>
<object class="GtkStackPage">
<property name="name">title_page</property>
<property name="child">
<object class="AdwWindowTitle">
<property name="title">Test</property>
</object>
</property>
</object>
</child>

</object>
</property>
</object>
</child>

<!-- Main -->
<child>
<object class="AdwViewStack" id="stack">
<property name="vexpand">True</property>

<!-- Page 1 -->
<child>
<object class="AdwViewStackPage">
<property name="name">Test Page 1</property>
<property name="title">Test Page 1</property>
<property name="icon-name">org.gnome.Settings-display-symbolic</property>
<property name="child">
<object class="AdwStatusPage">
<property name="title">Test Page 1</property>
<property name="description">Test Page 1</property>
</object>
</property>
</object>
</child>

<!-- Page 2 -->
<child>
<object class="AdwViewStackPage">
<property name="name">Test Page 2</property>
<property name="title">Test Page 2</property>
<property name="icon-name">dialog-information-symbolic</property>
<property name="child">
<object class="AdwStatusPage">
<property name="title">Test Page 2</property>
<property name="description">Test Page 2</property>
</object>
</property>
</object>
</child>

</object>
</child>

<!-- Bottom Bar -->
<child>
<object class="AdwViewSwitcherBar" id="switcher_bar">
<property name="stack">stack</property>
<property name="reveal">False</property>
</object>
</child>

</object>
</property>
</object>
</interface>
"""

class WidthTrackerApp(Adw.Application):
def __init__(self, **kwargs):
super().__init__(application_id='com.example.Test',
flags=Gio.ApplicationFlags.FLAGS_NONE,
**kwargs)

def do_activate(self):
builder = Gtk.Builder.new_from_string(UI_XML, -1)

self.window = builder.get_object('main_window')

self.window.set_application(self)

self.window.present()


if __name__ == '__main__':
app = WidthTrackerApp()
app.run(sys.argv)


How can I get control of the transition animations and the breakpoint at the same time?

Continue reading...