Ler em inglês

Compartilhar via


Associações blazor móveis experimentais

As Associações De Blazor Móveis Experimentais permitem que os desenvolvedores criem aplicativos móveis nativos e híbridos usando C# e .NET para Android, iOS, Windows, macOS e Tizen usando padrões de programação web familiares. O Experimental Mobile Blazor Bindings usa a sintaxe Razor para definir componentes e comportamentos da interface do usuário de um aplicativo. Os componentes de interface do usuário subjacentes são baseados em componentes de interface do usuário nativos do Xamarin.Forms e em aplicativos híbridos eles são misturados com elementos HTML.

O Blazor é executado no .NET Standard 2.0 para que você possa compartilhar seu código .NET com a maioria dos outros aplicativos .NET.

Com as Associações do Blazor Móvel, é fácil criar uma interface do usuário nativa com rótulos, botões e outros componentes nativos da interface do usuário:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

E aqui ele está em execução no Android Emulator:

Aplicativo nativo simples em execução no Android Emulator

E você pode criar aplicativos híbridos que combinam interface do usuário nativa e interface do usuário HTML na mesma tela, todos compartilhando a mesma lógica e estado do aplicativo:

  • /Main.razor: (interface do usuário nativa)

    @inject CounterState CounterState
    
    <ContentView>
        <StackLayout>
    
            <StackLayout Margin="new Thickness(20)">
                <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
                <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
            </StackLayout>
    
            <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
                <FirstBlazorHybridApp.WebUI.App />
            </BlazorWebView>
    
        </StackLayout>
    </ContentView>
    
    @code {
        // initialization code
    }
    
  • /WebUI/App.razor: (interface do usuário HTML)

    @inject CounterState CounterState
    
    <div style="text-align: center; background-color: lightblue;">
        <div>
            <span style="font-size: 30px; font-weight: bold;">
                You pressed @CounterState.CurrentCount times
            </span>
        </div>
        <div>
            <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
        </div>
    </div>
    
    @code
    {
        private void ClickMe()
        {
            CounterState.IncrementCount();
        }
    
        // initialization code
    }
    

E aqui ele está em execução no Simulador do iOS, com a interface do usuário nativa na parte superior e a interface do usuário HTML na parte inferior, compartilhando a lógica e o estado do aplicativo:

Aplicativo híbrido simples em execução no Simulador do iOS

Para criar seus primeiros aplicativos, marcar estes tópicos:

E quando estiver pronto para mais, marcar os passo a passo:

Em seguida, alguns dos tópicos avançados:

E, por fim, se você quiser contribuir, marcar estes tópicos: