Прочитать на английском

Поделиться через


Экспериментальные мобильные привязки Blazor

Экспериментальные мобильные привязки Blazor позволяют разработчикам создавать собственные и гибридные мобильные приложения с помощью C# и .NET для Android, iOS, Windows, macOS и Tizen, используя знакомые шаблоны веб-программирования. Экспериментальные мобильные привязки Blazor используют синтаксис Razor для определения компонентов пользовательского интерфейса и поведения приложения. Базовые компоненты пользовательского интерфейса основаны на компонентах собственного пользовательского интерфейса Xamarin.Forms, а в гибридных приложениях они смешиваются с элементами HTML.

Blazor работает на .NET Standard 2.0 , поэтому вы можете поделиться кодом .NET с большинством других приложений .NET.

С помощью мобильных привязок Blazor можно легко создать собственный пользовательский интерфейс с метками, кнопками и другими собственными компонентами пользовательского интерфейса:

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

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

И здесь он выполняется в Android Emulator:

Простое собственное приложение, работающее в эмуляторе Android

Кроме того, вы можете создавать гибридные приложения, которые смешивают собственный пользовательский интерфейс и пользовательский интерфейс HTML на одном экране с одинаковыми логикой и состоянием приложения:

  • /Main.razor: (собственный пользовательский интерфейс)

    @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: (пользовательский интерфейс 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
    }
    

И здесь он выполняется в симуляторе iOS с собственным пользовательским интерфейсом поверх, а пользовательский интерфейс HTML в нижней части с общими логикой приложения и состоянием:

Простое гибридное приложение, работающее в симуляторе iOS

Чтобы создать свои первые приложения, проверка следующие разделы:

Когда вы будете готовы к дополнительным действиям, проверка пошаговые руководства:

Затем некоторые из расширенных тем:

И, наконец, если вы хотите внести свой вклад, проверка следующие темы: