Aplicativo móvel

Crie um aplicativo móvel com Dioxus!

Exemplo: Aplicativo Todo

Suporte

Atualmente, a plataforma móvel é o destino de renderizador menos suportado para o Dioxus. Os aplicativos móveis são renderizados com o WebView da plataforma, o que significa que animações, transparência e widgets nativos não estão disponíveis no momento.

Além disso, o iOS é a única plataforma móvel compatível. É possível obter o Dioxus rodando no Android e renderizado com WebView, mas a biblioteca de janelas do Rust que o Dioxus usa – tao – atualmente não suporta Android.

Atualmente, o suporte móvel é mais adequado para aplicativos no estilo CRUD, idealmente para equipes internas que precisam desenvolver rapidamente, mas não se importam muito com animações ou widgets nativos.

Configurando

A configuração com dispositivos móveis pode ser bastante desafiadora. As ferramentas aqui não são ótimas (ainda) e podem precisar de alguns hacks para fazer as coisas funcionarem. O macOS M1 é amplamente inexplorado e pode não funcionar para você.

Vamos usar cargo-mobile para construir para dispositivos móveis. Primeiro, instale-o:

cargo install --git https://github.com/BrainiumLLC/cargo-mobile

E, em seguida, inicialize seu aplicativo para a plataforma certa. Use o modelo winit por enquanto. No momento, não há modelo "Dioxus" no cargo-mobile.

cargo mobile init

Nós vamos limpar completamente as dependências que ele gera para nós, trocando winit por dioxus-mobile.

[package]
name = "dioxus-ios-demo"
version = "0.1.0"
authors = ["Jonathan Kelley <jkelleyrtp@gmail.com>"]
edition = "2018"


# leave the `lib` declaration
[lib]
crate-type = ["staticlib", "cdylib", "rlib"]


# leave the binary it generates for us
[[bin]]
name = "dioxus-ios-demo-desktop"
path = "gen/bin/desktop.rs"

# clear all the dependencies
[dependencies]
mobile-entry-point = "0.1.0"
dioxus = { version = "*" }
dioxus-desktop = { version = "*" }
simple_logger = "*"

Edite seu lib.rs:

use dioxus::prelude::*;

fn main() {
    dioxus_desktop::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx!{
        div {
            "hello world!"
        }
    })
}