Hello World - 它是如何工作的？

项目
08/22/2023

重要

此项目是一个实验性版本。我们希望你试用实验性移动 Blazor 绑定，并在中 https://github.com/xamarin/MobileBlazorBindings提供反馈。

注意

此页是生成第一个应用演练的延续。建议先完成该演练，然后再继续。

让我们看一下在上一演练中创建的初始项目，详细了解如何使用实验性移动 Blazor 绑定。

要查看main项目是包含.razor文件的共享项目。 Android 和 iOS 项目不包含任何特定于实验性移动 Blazor 绑定的代码。

以下是共享项目中的文件：

_Imports.razor - 包含应用于此文件夹及其子文件夹中所有其他 .razor 文件的常见指令。子文件夹可以有自己的 _Imports.razor 文件以及附加指令。此文件中最常见的指令类型是 @using 指令，它用于将命名空间导入文件中 .razor ，与 C# using 语句完全相同。
App.cs- 包含应用程序的main UI 入口点，由派生自基类的Xamarin.Forms.Application类表示。此类的构造函数实例化泛型主机，将服务添加到主机 (默认项目没有) ，然后使用主机将名为 HelloWorld 的 Blazor 组件添加到应用程序元素 (this) 。
Counter.razor - 包含名为的 CounterBlazor 组件。
HelloWorld.razor - 包含名为的 HelloWorldBlazor 组件。

让我们深入了解这两个 Blazor 组件，了解它们的工作原理。

计数器 Blazor 组件

此组件包含两个部分：

定义 UI 元素及其关联属性和事件处理程序的标记：
```
<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 组件及其属性和事件匹配的 UI 组件。某些属性具有计算值，例如 Label 组件的 Text 属性，其值设置为由 C# 代码计算的值，该值由 @( ... ) 表达式块表示。

运行事件处理程序（例如 Button 组件的 OnClick 事件）时，该组件会自动重新呈现，这使 UI 无需任何其他逻辑即可更新。更高级的方案可以控制哪些组件重新呈现以及何时重新呈现。
实现任何事件处理程序或其他组件功能的代码，包装在块 @code { ... } 中：
```
int count;

void IncrementCount()
{
    count++;
}
```
此代码递count增字段，该字段也用作组件属性的LabelText计算值。 IncrementCount()运行事件处理程序后，将在 UI 重新呈现时使用的新值count。

HelloWorld Blazor 组件

HelloWorld 组件仅包含标记：

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

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

        <Counter />

    </StackLayout>
</ContentView>

请注意， Counter 此组件通过将组件引用为标记 <Counter />来引用它。

每个 Blazor 组件都编译为与文件同名的类。命名空间是项目的根命名空间，以及文件夹名称（如果有），用点分隔 (.) 。其他 C# 代码可以通过其类型名称 (不常见的) 引用该类型，也可以在 .razor 文件中将其用作标记来引用该类型。

Share via

Hello World - 它是如何工作的？

计数器 Blazor 组件

HelloWorld Blazor 组件

其他资源