MudTreeViewItem -如何设置动态激活?

Question

<MudPaper Width="350px" MaxHeight="500px" Class="overflow-y-auto" Elevation="0">
<MudTreeView Items="@TreeItems" @bind-SelectedValue="SelectedValue" Hover="true">
<ItemTemplate>
<MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context">
<Content>
<MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" />
<MudIcon Icon="@context.Icon" Class="ml-0 mr-2" Color="@Color.Default" />
<MudText>@context.Text</MudText>
</Content>
</MudTreeViewItem>
</ItemTemplate>
</MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">
<strong>
<i>Debug</i>
</strong> Selected item: @(SelectedValue?.Text ?? "no selected value")
</MudText>

public partial class LayersTreeView
{
private TreeItemData? SelectedValue;
private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();
public class TreeItemData
{
public string Text { get; set; }
public string Icon { get; set; }
public bool IsExpanded { get; set; } = true;
public bool HasChild => TreeItems != null && TreeItems.Count > 0;
public HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();
public TreeItemData(string text, string icon)
{
Text = text;
Icon = icon;
}
}
protected override void OnInitialized()
{
TreeItems.Add(new TreeItemData(".azure", Icons.Custom.Brands.MicrosoftAzure));
TreeItems.Add(new TreeItemData(".github", Icons.Custom.Brands.GitHub));
TreeItems.Add(new TreeItemData(".vscode", Icons.Custom.Brands.MicrosoftVisualStudio));
TreeItems.Add(new TreeItemData("content", Icons.Custom.FileFormats.FileDocument));
TreeItems.Add(new TreeItemData("src", Icons.Custom.FileFormats.FileCode)
{TreeItems = new HashSet<TreeItemData>()
{new TreeItemData("MudBlazor", Icons.Custom.Brands.MudBlazor), new TreeItemData("MudBlazor.Docs", Icons.Custom.FileFormats.FileDocument)
{TreeItems = new HashSet<TreeItemData>()
{new TreeItemData("_Imports.razor", Icons.Filled.AlternateEmail), new TreeItemData("compilerconfig.json", Icons.Custom.FileFormats.FileImage), new TreeItemData("MudBlazor.Docs.csproj", Icons.Custom.Brands.MicrosoftVisualStudio), new TreeItemData("NewFilesToBuild.txt", Icons.Custom.FileFormats.FileDocument), }}, new TreeItemData("MudBlazor.Docs.Client", Icons.Filled.Folder), new TreeItemData("MudBlazor.Docs.Compiler", Icons.Filled.Folder), new TreeItemData("MudBlazor.Docs.Server", Icons.Filled.Folder), new TreeItemData("MudBlazor.UnitTests", Icons.Filled.Folder), new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Filled.Folder), new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode), new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio)}});
TreeItems.Add(new TreeItemData("History", Icons.Filled.Folder));
}
}

我正在尝试将TreeViewItem设置为"动态选择"。

我想只允许选择ChildViewItem，而不是父节点。但是，当我尝试设置<MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context" Activated="@(!(context.HasChild))">并选择任何MudTreeViewItem时，应用程序被冻结。

我怎样才能得到想要的输出?谢谢你。

Answer 1

我找到了冻结行为的原因。这是因为Activated=true项目一次只能有一个。设置Activated=@context.HasChild违反了"一次一个"原则;当有多个子项时的规则。

我发现的解决方案是使用@if-else指令来创建MudTreeViewItem。我不确定这是不是最好的/正确的方法，但它能完成工作。

完整的解决方案如下:

<MudPaper Width="350px" MaxHeight="500px" Class="overflow-y-auto" Elevation="0">
<MudTreeView Items="@TreeItems" @bind-SelectedValue="SelectedValue">
<ItemTemplate>
@if (@context.HasChild) {
<MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context" Activated="false">
<Content>
<MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" />
<MudIcon Icon="@context.Icon" Class="ml-0 mr-2" Color="@Color.Default" />
<MudText>@context.Text</MudText>
</Content>
</MudTreeViewItem>
} else {
<MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context">
<Content>
<MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" />
<MudIcon Icon="@context.Icon" Class="ml-0 mr-2" Color="@Color.Default" />
<MudText>@context.Text</MudText>
</Content>
</MudTreeViewItem>
}
</ItemTemplate>
</MudTreeView>
</MudPaper>
@code {
private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();
private TreeItemData? SelectedValue;
public class TreeItemData
{
public string Text { get; set; }
public string Icon { get; set; }
public bool IsExpanded { get; set; } = true;
public bool HasChild => TreeItems != null && TreeItems.Count > 0;
public HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();
public TreeItemData(string text, string icon)
{
Text = text;
Icon = icon;
}
}
protected override void OnInitialized()
{
TreeItems.Add(new TreeItemData(".azure", Icons.Custom.Brands.MicrosoftAzure));
TreeItems.Add(new TreeItemData(".github", Icons.Custom.Brands.GitHub));
TreeItems.Add(new TreeItemData(".vscode", Icons.Custom.Brands.MicrosoftVisualStudio));
TreeItems.Add(new TreeItemData("content", Icons.Custom.FileFormats.FileDocument));
TreeItems.Add(new TreeItemData("src", Icons.Custom.FileFormats.FileCode)
{
TreeItems = new HashSet<TreeItemData>()
{
new TreeItemData("MudBlazor", Icons.Custom.Brands.MudBlazor),
new TreeItemData("MudBlazor.Docs", Icons.Custom.FileFormats.FileDocument)
{
TreeItems = new HashSet<TreeItemData>()
{
new TreeItemData("_Imports.razor", Icons.Filled.AlternateEmail),
new TreeItemData( "compilerconfig.json", Icons.Custom.FileFormats.FileImage),
new TreeItemData( "MudBlazor.Docs.csproj", Icons.Custom.Brands.MicrosoftVisualStudio),
new TreeItemData("NewFilesToBuild.txt" , Icons.Custom.FileFormats.FileDocument),
}
},
new TreeItemData("MudBlazor.Docs.Client", Icons.Filled.Folder),
new TreeItemData("MudBlazor.Docs.Compiler", Icons.Filled.Folder),
new TreeItemData("MudBlazor.Docs.Server", Icons.Filled.Folder),
new TreeItemData("MudBlazor.UnitTests", Icons.Filled.Folder),
new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Filled.Folder),
new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode),
new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio)
}
});
TreeItems.Add(new TreeItemData("History", Icons.Filled.Folder));
}
}