Maui的shell和FlyoutPage布局是有冲突的,如果用FlyoutPage布局,必须将FlyoutPage设为根页面,否则可能会有异常。
先安装二个Nuget包
在引导文件MauiProgram.cs中添加如下语句。
先设计要展示的页面,准备展示二个页面,一个显示命名颜色,一个显示调色板。
在models文件夹中添加模型NamedColor.cs
namespace FlyoutPageDemoApp.Models
{
class NamedColor
{
public string Name { get; set; }
public Color Color { get; set; }
}
}
在viewmodels文件夹中添加NamedColorsViewModel.cs,内容如下
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using FlyoutPageDemoApp.Models;
using System.Collections.ObjectModel;
using System.Reflection;
namespace FlyoutPageDemoApp.ViewModels
{
partial class NamedColorsViewModel : ObservableObject
{
[ObservableProperty]
private static ObservableCollection<NamedColorsViewModel> all = new
ObservableCollection<NamedColorsViewModel>();
private NamedColor namedColor;
public string Name
{
get => namedColor.Name;
set => SetProperty(namedColor.Name, value, namedColor, (n, v) => n.Name = v);
}
public Color Color
{
get => namedColor.Color;
set => SetProperty(namedColor.Color, value, namedColor, (n, value) => n.Color
= value);
}
public NamedColorsViewModel()
{
namedColor = new NamedColor() { Color = Colors.Teal, Name = "Teal" };
}
private static async IAsyncEnumerable<NamedColor> AsyncEnumerableColors()
{
foreach (FieldInfo field in typeof(Colors).GetRuntimeFields())
{
if (field.IsPublic && field.IsStatic && field.FieldType == typeof(Color))
{
yield return new NamedColor { Color = (Color)field.GetValue(null),
Name = field.Name };
await Task.Delay(1);
}
}
}
[RelayCommand]
private async Task FillCollection()
{
All.Clear();
await foreach(NamedColor color in AsyncEnumerableColors())
{
All.Add(new NamedColorsViewModel { Name = color.Name, Color = color.Color
});
}
}
}
}
在viewmodels文件夹下添加PaletteViewModel.cs,这是第二个页面viewmodel,
using CommunityToolkit.Maui.Core.Extensions;
using CommunityToolkit.Mvvm.ComponentModel;
namespace FlyoutPageDemoApp.ViewModels
{
partial class PaletteViewModel:ObservableObject
{
private byte red;
private byte green;
private byte blue;
private Color color;
private string stringColor;
public Color Color
{
get => color;
set
{
if(color != value)
{
color = value;
red = color.GetByteRed();
green = color.GetByteGreen();
blue = color.GetByteBlue();