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

Hello World - как это работает?

  • Статья

Важно!

Этот проект является экспериментальным выпуском. Мы надеемся, что вы опробуете экспериментальные мобильные привязки Blazor и оставить отзыв по адресу https://github.com/xamarin/MobileBlazorBindings.

Примечание

Эта страница является продолжением пошагового руководства По созданию первого приложения . Прежде чем продолжить, рекомендуется выполнить это пошаговое руководство.

Давайте рассмотрим первоначальный проект, созданный в предыдущем пошаговом руководстве, чтобы понять, как использовать экспериментальные мобильные привязки Blazor.

Main проектом для просмотра является общий проект, содержащий .razor файлы. Проекты Android и iOS не содержат код, характерный для экспериментальных привязок Blazor для мобильных устройств.

Ниже приведены файлы в общем проекте:

  • _Imports.razor — содержит общие директивы, применяемые ко всем остальным .razor файлам в этой папке и ее вложенных папках. Вложенные папки могут содержать собственные _Imports.razor файлы с дополнительными директивами. Наиболее распространенным типом директивы в этом файле является директива @using , которая используется для импорта пространства имен в .razor файлы, точно так же, как оператор C# using .
  • App.cs— содержит точку входа main пользовательского интерфейса приложения, представленную классом, производным от Xamarin.Forms.Application базового класса. Конструктор этого класса создает экземпляр универсального узла, добавляет службы к узлу (в проекте по умолчанию нет), а затем использует узел для добавления компонента Blazor с именем HelloWorld в элемент приложения (this).
  • Counter.razor — содержит компонент Blazor с именем Counter.
  • HelloWorld.razor — содержит компонент Blazor с именем HelloWorld.

Давайте рассмотрим два компонента Blazor, чтобы узнать, как они работают.

Компонент Counter Blazor

Этот компонент содержит два раздела:

  1. Разметка, определяющая элементы пользовательского интерфейса и связанные с ними свойства и обработчики событий:

    <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">

    <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">

        <Button Text="Increment" OnClick="IncrementCount" />

        <Label Text="@("The button was clicked " + count + " times")"
            FontAttributes="FontAttributes.Bold"
            VerticalTextAlignment="TextAlignment.Center" />

    </StackLayout>

</Frame>

    Html-подобные теги представляют компоненты пользовательского интерфейса, соответствующие компонентам Xamarin.Forms, а также их свойствам и событиям. Некоторые свойства имеют вычисляемые значения, например Label свойство компонента Text , для которого задано значение, вычисленное кодом C#, которое обозначается блоком выражений @( ... ) .

    При запуске обработчика событий, например Button события компонента OnClick , компонент автоматически повторно отрисовывается, что позволяет пользовательскому интерфейсу обновляться без дополнительной логики. Более сложные сценарии могут управлять тем, какие компоненты будут повторно отображаться и когда.

  2. Код, реализующий обработчики событий или другие функциональные возможности компонента, заключенный @code { ... } в блок:

    int count;

void IncrementCount()
{
    count++;
}

    Этот код увеличивает count значение поля, которое также используется в качестве вычисляемого Label значения свойства компонента Text . После запуска обработчика IncrementCount() событий при повторной отрисовки count пользовательского интерфейса будет использоваться новое значение .

Компонент HelloWorld Blazor

Компонент HelloWorld содержит только разметку:

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Обратите внимание, что на Counter компонент ссылается этот компонент, ссылаясь на него как на тег <Counter />.

Каждый компонент Blazor компилируется в класс с тем же именем, что и файл. Пространство имен — это корневое пространство имен проекта, а также имена папок , если таковые есть, разделенные точками (.). На тип может ссылаться другой код C# через имя типа (не общее) или в .razor файле, используя его в качестве тега.