Freigeben über

Wetter-App

Wichtig

Dieses Projekt ist ein experimentelles Release. Wir hoffen, dass Sie Experimentelle Mobile Blazor Bindings ausprobieren und Feedback unter https://github.com/xamarin/MobileBlazorBindingsgeben.

Das vollständige Beispiel der Wetter-App finden Sie hier. Das Beispiel verwendet eine Xamarin.Forms-Komponente von Drittanbietern, die Grid Komponente, bidirektionale Bindungen, Komponenteninitialisierungslogik, Abhängigkeitsinjektion, CSS-Stile und viele weitere Features.

Die fertige App sieht wie folgt aus:

Wetter-App, die im Android-Emulator ausgeführt wird

Anstatt die App von Grund auf neu zu schreiben, werfen wir einen Blick auf die wichtigsten Komponenten in dieser Beispielanwendung.

  1. Grid Komponente. Die gesamte Benutzeroberfläche der Wetter-App ist in der Komponente enthalten, wobei ihr WeatherAppStandard Layout von einer Grid Komponente festgelegt wird.

    • Die Grid Komponente verfügt über zwei Standard Abschnitte zum Einrichten ihrer Struktur: die Zeilen-/Spaltendefinitionen und die Rasterzellen.

      <Grid RowDefinitions="..." ColumnDefinitions="...">
    @* GridCell components *@
</Grid>

    • Die RowDefinition Eigenschaften und ColumnDefinition richten die Struktur des Rasters ein:

      RowDefinitions="Auto, *, Auto, Auto, Auto, Auto, Auto"

      Die Eigenschaften sind optional, und wenn sie weggelassen werden, implizieren Sie eine einzelne Zeile/Spalte. Jeder durch Trennzeichen getrennte Wert gibt die relativen, absoluten oder automatischen Dimensionen dieser Zeile/Spalte an.

      Weitere Informationen zu den Eigenschaften finden Sie hier:

    • Der Inhalt des Rasters enthält mehrere <GridCell> Komponenten, die eine Row- , Column- RowSpanund ColumnSpan -Eigenschaft aufweisen können und ein einzelnes Element enthalten, das den Zellinhalt darstellt. Alle diese Eigenschaften sind optional. Dies GridCell ist z. B. für Zeilenindex 6, Spaltenindex 0 und keine Zeilen-/Spaltenspanne:

      <GridCell Row="6">
    <StackLayout Orientation="StackOrientation.Horizontal"
                HorizontalOptions="LayoutOptions.Center">
        <Label Text="I'm feeling too hot/cold!"
                VerticalOptions="LayoutOptions.Center"/>
        <Stepper @bind-Value="Temperature"
                    Minimum="0"
                    Maximum="120"
                    Increment="3"
                    Opacity="0.6"
                    VerticalOptions="LayoutOptions.Center" />
    </StackLayout>
</GridCell>

  2. Eine beliebte Drittanbieterkomponente, die häufig in Xamarin.Forms-Apps verwendet wird, ist die PancakeView Komponente. Die Komponente wurde umschlossen, damit sie mit der Blazor-Syntax in einem separaten Klassenbibliotheksprojekt verwendet werden kann: Microsoft.MobileBlazorBindings.PancakeView. Weitere Informationen zum Umschließen von Xamarin.Forms-Komponenten für die Verwendung mit Blazor-Syntax finden Sie unter Wrapping Xamarin.Forms components for use with Blazor topic.

  3. Abhängigkeitsinjektion wird in der Wetter-App mit einem WeatherService Typ verwendet, der auf dem Host registriert und auf der WeatherApp.razor Seite verwendet wird.

  4. Die Komponenteninitialisierung ermöglicht das Ausführen von Initialisierungscode, wenn eine Komponente ausgeführt wird. Die Wetter-App verwendet dies, um die anfänglichen Wetterdaten zu laden, wenn die App beginnt, indem sie die OnInitialized -Methode überschreibt:

    protected override void OnInitialized()
{
    CurrentWeather = WeatherService.GetWeatherReport();
    Temperature = CurrentWeather.Temperature;
}

    Weitere Informationen, einschließlich der Asynchronitätsinitialisierung, finden Sie in der Dokumentation zu Blazor-Lebenszyklusmethoden.

  5. CSS-Formatvorlagen werden verwendet, um allgemeine Eigenschaften nach Elementtyp oder CSS-Klassenname anzuwenden. Eine CSS-Datei ist als eingebettete Ressource im freigegebenen Projekt enthalten (dies ist die Standardeinstellung für CSS-Dateien). Weitere Informationen zur Verwendung von CSS in Mobilen Blazor-Bindungen finden Sie im Thema CSS-Stile.