Minimal Rio Intro

In early November I saw a release announcement for Rio (https://rio.dev), an upcoming Python library for creating user interfaces. I have years of experience using Qt with Python and always interested in seeing new approaches.

I went through the Tic Tac Toe tutorial and found a lot of things I liked. I was initially impressed by the simplicity of writing interfaces using component classes. The interface runs through an HTML document, which is completely encapsulated by the library. This gives many possibilities on how and where Rio applications are run. Rio optionally includes a standalone webview application. However, I critically disliked the included rio command line tool and the initial project structure it creates.

I think Rio deserves a lighter weight tutorial that strips the boilerplate and abstractions to show the potential this library has. Let’s start from nothing and discover how Rio feels building it up for ourselves. I found getting started with uv to be as simple as I’d hoped.

uv init minirio <span>--no-readme</span> <span>--no-pin-python</span> <span>--vcs</span> none
<span>cd </span>minirio
uv add rio-ui[window]
uv init minirio <span>--no-readme</span> <span>--no-pin-python</span> <span>--vcs</span> none
<span>cd </span>minirio
uv add rio-ui[window]
uv init minirio --no-readme --no-pin-python --vcs none
cd minirio
uv add rio-ui[window]

Enter fullscreen mode Exit fullscreen mode

The optional [window] feature installs the many dependencies needed to run the standalone app. Also be aware I needed to use ==9.3 on Windows due to missing pyside builds.

Let’s use the minimal code needed to build this application.

<span>import</span> <span>rio</span>
<span>class</span> <span>Greeting</span><span>(</span><span>rio</span><span>.</span><span>Component</span><span>):</span>
    <span>name</span><span>:</span> <span>str</span> <span>=</span> <span>'</span><span>World</span><span>'</span>
    <span>def</span> <span>build</span><span>(</span><span>self</span><span>):</span>
        <span>return</span> <span>rio</span><span>.</span><span>Row</span><span>(</span>
            <span>rio</span><span>.</span><span>Icon</span><span>(</span><span>'</span><span>material/star</span><span>'</span><span>,</span> <span>align_x</span><span>=</span><span>0.8</span><span>,</span> <span>align_y</span><span>=</span><span>0.5</span><span>),</span>
            <span>rio</span><span>.</span><span>Markdown</span><span>(</span><span>f</span><span>'</span><span>Hello, **</span><span>{</span><span>self</span><span>.</span><span>name</span><span>}</span><span>**</span><span>'</span><span>,</span> <span>align_y</span><span>=</span><span>0.5</span><span>),</span>
        <span>)</span>
<span>if</span> <span>__name__</span> <span>==</span> <span>'</span><span>__main__</span><span>'</span><span>:</span>
    <span>app</span> <span>=</span> <span>rio</span><span>.</span><span>App</span><span>(</span><span>build</span><span>=</span><span>Greeting</span><span>)</span>
    <span>app</span><span>.</span><span>run_in_window</span><span>()</span>
<span>import</span> <span>rio</span>

<span>class</span> <span>Greeting</span><span>(</span><span>rio</span><span>.</span><span>Component</span><span>):</span>
    <span>name</span><span>:</span> <span>str</span> <span>=</span> <span>'</span><span>World</span><span>'</span>
    <span>def</span> <span>build</span><span>(</span><span>self</span><span>):</span>
        <span>return</span> <span>rio</span><span>.</span><span>Row</span><span>(</span>
            <span>rio</span><span>.</span><span>Icon</span><span>(</span><span>'</span><span>material/star</span><span>'</span><span>,</span> <span>align_x</span><span>=</span><span>0.8</span><span>,</span> <span>align_y</span><span>=</span><span>0.5</span><span>),</span>
            <span>rio</span><span>.</span><span>Markdown</span><span>(</span><span>f</span><span>'</span><span>Hello, **</span><span>{</span><span>self</span><span>.</span><span>name</span><span>}</span><span>**</span><span>'</span><span>,</span> <span>align_y</span><span>=</span><span>0.5</span><span>),</span>
        <span>)</span>

<span>if</span> <span>__name__</span> <span>==</span> <span>'</span><span>__main__</span><span>'</span><span>:</span>
    <span>app</span> <span>=</span> <span>rio</span><span>.</span><span>App</span><span>(</span><span>build</span><span>=</span><span>Greeting</span><span>)</span>
    <span>app</span><span>.</span><span>run_in_window</span><span>()</span>
import rio

class Greeting(rio.Component):
    name: str = 'World'
    def build(self):
        return rio.Row(
            rio.Icon('material/star', align_x=0.8, align_y=0.5),
            rio.Markdown(f'Hello, **{self.name}**', align_y=0.5),
        )

if __name__ == '__main__':
    app = rio.App(build=Greeting)
    app.run_in_window()

Enter fullscreen mode Exit fullscreen mode

This is a regular Python script. Run it with your python interpreter.

uv run hello.py
uv run hello.py
uv run hello.py

Enter fullscreen mode Exit fullscreen mode

A component is little more than a build method that returns a component and a state defined on the class. You do not define __init__ or other typical boilerplate. You can replace the run_in_window with a run_as_web_server and interact with this application in your browser.

It takes very little to add some interactivity. Here is a similar component that adds a checkbox and styling.

<span>gradient</span> <span>=</span> <span>rio</span><span>.</span><span>LinearGradientFill</span><span>(</span>
    <span>(</span><span>rio</span><span>.</span><span>Color</span><span>.</span><span>RED</span><span>,</span> <span>0</span><span>),</span> <span>(</span><span>rio</span><span>.</span><span>Color</span><span>.</span><span>PINK</span><span>,</span> <span>.</span><span>3</span><span>),</span>
<span>)</span>
<span>class</span> <span>Greeting2</span><span>(</span><span>rio</span><span>.</span><span>Component</span><span>):</span>
    <span>checked</span><span>:</span> <span>bool</span> <span>=</span> <span>False</span>
    <span>def</span> <span>build</span><span>(</span><span>self</span><span>):</span>
        <span>style</span> <span>=</span> <span>rio</span><span>.</span><span>TextStyle</span><span>(</span><span>fill</span><span>=</span><span>gradient</span><span>)</span> <span>if</span> <span>self</span><span>.</span><span>checked</span> <span>else</span> <span>'</span><span>text</span><span>'</span>
        <span>return</span> <span>rio</span><span>.</span><span>Row</span><span>(</span>
            <span>rio</span><span>.</span><span>Checkbox</span><span>(</span><span>is_on</span><span>=</span><span>self</span><span>.</span><span>bind</span><span>().</span><span>checked</span><span>),</span>
            <span>rio</span><span>.</span><span>Text</span><span>(</span><span>'</span><span>Roses are red.</span><span>'</span><span>,</span> <span>style</span><span>=</span><span>style</span><span>),</span>
        <span>)</span>
<span>gradient</span> <span>=</span> <span>rio</span><span>.</span><span>LinearGradientFill</span><span>(</span>
    <span>(</span><span>rio</span><span>.</span><span>Color</span><span>.</span><span>RED</span><span>,</span> <span>0</span><span>),</span> <span>(</span><span>rio</span><span>.</span><span>Color</span><span>.</span><span>PINK</span><span>,</span> <span>.</span><span>3</span><span>),</span>
<span>)</span>

<span>class</span> <span>Greeting2</span><span>(</span><span>rio</span><span>.</span><span>Component</span><span>):</span>
    <span>checked</span><span>:</span> <span>bool</span> <span>=</span> <span>False</span>

    <span>def</span> <span>build</span><span>(</span><span>self</span><span>):</span>
        <span>style</span> <span>=</span> <span>rio</span><span>.</span><span>TextStyle</span><span>(</span><span>fill</span><span>=</span><span>gradient</span><span>)</span> <span>if</span> <span>self</span><span>.</span><span>checked</span> <span>else</span> <span>'</span><span>text</span><span>'</span>
        <span>return</span> <span>rio</span><span>.</span><span>Row</span><span>(</span>
            <span>rio</span><span>.</span><span>Checkbox</span><span>(</span><span>is_on</span><span>=</span><span>self</span><span>.</span><span>bind</span><span>().</span><span>checked</span><span>),</span>
            <span>rio</span><span>.</span><span>Text</span><span>(</span><span>'</span><span>Roses are red.</span><span>'</span><span>,</span> <span>style</span><span>=</span><span>style</span><span>),</span>
        <span>)</span>
gradient = rio.LinearGradientFill(
    (rio.Color.RED, 0), (rio.Color.PINK, .3),
)

class Greeting2(rio.Component):
    checked: bool = False

    def build(self):
        style = rio.TextStyle(fill=gradient) if self.checked else 'text'
        return rio.Row(
            rio.Checkbox(is_on=self.bind().checked),
            rio.Text('Roses are red.', style=style),
        )

Enter fullscreen mode Exit fullscreen mode

This is using self.bind() to create a two-way binding between the checkbox state and an attribute. Alternatively, it is straightforward to assign the checkbox’s on_change argument to any method and change attributes of self as desired.

Find more complete examples and documentation on the Rio project website. Personally, I’m not yet ready to leave the world of Qt and Pyside, but I also think there’s enough in Rio to keep an eye on.

• https://rio.dev/examples
• https://rio.dev/docs
• https://github.com/rio-labs/rio

原文链接：Minimal Rio Intro