Share via

Hello world - jak to działa?

  • Artykuł

Ważne

Ten projekt jest wersją eksperymentalną. Mamy nadzieję, że wypróbujesz eksperymentalne powiązania platformy Blazor dla urządzeń przenośnych i przekażesz opinię na stronie https://github.com/xamarin/MobileBlazorBindings.

Uwaga

Ta strona jest kontynuacją przewodnika Kompilowanie pierwszej aplikacji . Zalecamy ukończenie tego przewodnika przed kontynuowaniem.

Przyjrzyjmy się początkowemu projektowi utworzonemu w poprzednim przewodniku, aby dowiedzieć się więcej o sposobie korzystania z eksperymentalnych powiązań platformy Blazor dla urządzeń przenośnych.

Głównym projektem do przyjrzenia się jest udostępniony projekt zawierający .razor pliki. Projekty systemu Android i iOS nie zawierają żadnego kodu specyficznego dla eksperymentalnych powiązań platformy Blazor dla urządzeń przenośnych.

Są to pliki w projekcie udostępnionym:

  • _Imports.razor — Zawiera wspólne dyrektywy, które są stosowane do wszystkich innych .razor plików w tym folderze i jego podfolderach. Podfoldery mogą mieć własne _Imports.razor pliki z dodatkowymi dyrektywami. Najbardziej typowym typem dyrektywy w tym pliku jest @using dyrektywa, która służy do importowania przestrzeni nazw do .razor plików, dokładnie tak samo jak instrukcja języka C# using .
  • App.cs — Zawiera główny punkt wejścia interfejsu użytkownika aplikacji reprezentowany przez klasę pochodzącą z klasy bazowej Xamarin.Forms.Application . Konstruktor tej klasy tworzy wystąpienie hosta ogólnego, dodaje usługi do hosta (projekt domyślny nie ma), a następnie używa hosta do dodania składnika Blazor o nazwie HelloWorld do elementu aplikacji (this).
  • Counter.razor — Zawiera składnik Blazor o nazwie Counter.
  • HelloWorld.razor — Zawiera składnik Blazor o nazwie HelloWorld.

Zapoznajmy się z dwoma składnikami Blazor, aby zobaczyć, jak działają.

Składnik Counter Blazor

Ten składnik zawiera dwie sekcje:

  1. Znaczniki definiujące elementy interfejsu użytkownika i skojarzone z nimi właściwości i programy obsługi zdarzeń:

    <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>

    Tagi przypominające kod HTML reprezentują składniki interfejsu użytkownika zgodne ze składnikami platformy Xamarin.Forms oraz ich właściwościami i zdarzeniami. Niektóre właściwości mają obliczone wartości, takie jak Label właściwość składnika Text , która ma wartość ustawioną na wartość obliczoną przez kod języka C#, która jest oznaczona przez @( ... ) blok wyrażeń.

    Po uruchomieniu Button procedury obsługi zdarzeń, takiej jak zdarzenie składnika OnClick , składnik automatycznie ponownie renderuje, co umożliwia interfejsowi użytkownika aktualizowanie bez dodatkowej logiki. Bardziej zaawansowane scenariusze mogą kontrolować, które składniki są ponownie renderowane i kiedy.

  2. Kod implementujący wszystkie programy obsługi zdarzeń lub inne funkcje składników opakowane w @code { ... } blok:

    int count;

void IncrementCount()
{
    count++;
}

    Ten kod zwiększa count pole, które jest również używane jako obliczona wartość Label właściwości składnika Text . Po uruchomieniu IncrementCount() procedury obsługi zdarzeń nowa wartość count zostanie użyta podczas ponownego renderowania interfejsu użytkownika.

HelloWorld Blazor, składnik

Składnik HelloWorld zawiera tylko znaczniki:

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

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

        <Counter />

    </StackLayout>
</ContentView>

Należy pamiętać, że Counter składnik jest przywołyny w tym składniku, odwołując się do niego jako tag <Counter />.

Każdy składnik Blazor jest kompilowany w klasie o takiej samej nazwie jak plik. Przestrzeń nazw to główna przestrzeń nazw projektu, a także nazwy folderów, jeśli istnieją, oddzielone kropkami (.). Typ można odwoływać się do innego kodu w języku C# za pośrednictwem nazwy typu (nie jest to wspólne) lub w .razor pliku, używając go jako tagu.