.NET MAUI社区工具包中的UniformItemsLayout入门

目录

什么是.NET MAUI Community Toolkit？

初始设置

什么是UniformItemsLayout？

探索布局结构

如果我不指定MaxColumn和MaxRows属性，会发生什么情况？

结论

---

.NET MAUI社区工具包提供了一些UI布局。让我们了解一下UniformItemsLayout以及如何实现它。

布局是促进UI组件在屏幕上的排列和分组的类。本机.NET MAUI布局包括StackLayout、AbsoluteLayout、Grid和FlexLayout。.NET MAUI社区工具包为我们的应用程序提供了更多布局，以实现更多设计多样性。

在本文中，我们将探讨其中的一些布局，重点介绍UniformItemsLayout并演示其轻松实现。我看看！

什么是.NET MAUI Community Toolkit？

🧠 .NET MAUI社区工具包是由社区精心开发的可重用组件的精选集合。它包含一系列元素，例如动画、转换器和行为，所有这些都旨在加速应用程序开发。此外，它还确保了iOS、Android、macOS和WinUI之间的无缝兼容性，这一切都归功于.NET MAUI的强大功能。

我在下面写了更多关于它的内容。

初始设置

若要正确实现UniformItemsLayout，请确保在应用中正确配置了.NET MAUI社区工具包。设置它很简单，如以下步骤所述：

1. 安装：首先，请确保通过添加Community.Toolkit.Maui NuGet包来安装工具包。

2. 在MauiProgram.cs中设置：添加NuGet包后，导航到MauiProgram.cs。在UseMauiApp<App>()正下方，追加：

.UseMauiCommunityToolkit()

3. Namespace补充：在页面中包含toolkit命名空间：

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

什么是UniformItemsLayout？

UniformItemsLayout 是.NET MAUI社区工具包中的布局。它使每行和每列中所有组件的大小保持一致。

探索布局结构

让我们来看看这张图片：要添加布局，您必须记住以下元素：

➖ 第1步：您必须分别打开/关闭<toolkit:UniformItemsLayout></toolkit:UniformItemsLayout>标签，其中“toolkit”是命名空间定义。

➖ 第2步： 最后，在这些标签中，添加您需要的所有视觉元素。例如，一个Button。

它是如何工作的？

通过此布局，您可以指定可以排列元素的最大行数和列数。这是使用以下属性完成的：

• MaxColumn：此属性接受整数值，并设置布局的最大列数。
• MaxRows：此属性也接受整数值，并设置布局的最大行数。

让我们看一个代码示例：

<toolkit:UniformItemsLayout MaxRows="2" MaxColumns="2" Padding="30,0" VerticalOptions="Center">
	<Button BackgroundColor="DeepPink" HeightRequest="70"/>
	<Button BackgroundColor="HotPink" HeightRequest="70"/>
	<Button BackgroundColor="LightPink" HeightRequest="70"/>
	<Button BackgroundColor="Pink" HeightRequest="70"/>
</toolkit:UniformItemsLayout>

您应该期待类似于下面显示的结果：

如果我不指定MaxColumn和MaxRows属性，会发生什么情况？

虽然添加这些属性不是强制性的，但如果不指定它们，则会导致布局中的内容自动划分。这种划分基于布局中元素所需的行数和列数。

💡 如果我们使用与上一个示例中相同的代码，但未指定最大行数和列数，则结果将如下所示：

🚫 局限性

• 设置最大行数或列数时，请注意。如果元素数超过指定的最大值，则多余的元素将不会显示在屏幕上。

结论

大功告成！通过这种快速简单的方法，您可以在日常使用中开始使用.NET MAUI社区工具包中的UniformItemsLayout，并继续探索其他方法！💚💕

https://www.telerik.com/blogs/getting-started-uniformitemslayout-net-maui-community-toolkit