FluentTreeView仅根节点可切换折叠/展开,子节点无响应的问题求助
FluentTreeView仅根节点可切换折叠/展开,子节点无响应的问题求助
大家好,我现在用Fluent UI Library开发Blazor UI,碰到了FluentTreeView组件的一个棘手问题:只有根节点能正常触发展开/折叠操作,点击任何子节点尝试切换状态时,UI只会出现轻微的闪烁,但节点的展开/折叠状态完全没有变化,始终保持原样。
问题场景与代码展示
我通过绑定ObservableCollection来生成树结构,以下是相关代码:
WorkSequencePage.razor
<FluentTreeView Items="@_treeViewItems" @bind-SelectedItem="_selectedItem"> <ItemTemplate> <span class="anchor" @onclick="() => ViewModel.FocusWork(context.Text)">@context.Text</span> @if (context.Items is not null && context.Items.Any()) { <span style="color: var(--bs-secondary); margin: 0 4px;"> [@context.Items.Count() @(context.Items.Count() == 1 ? "child" : "children")] </span> } </ItemTemplate> </FluentTreeView>
WorkSequencePage.razor.cs
public partial class WorkSequencePage { private ObservableCollection<ITreeViewItem> _treeViewItems = []; private ITreeViewItem? _selectedItem; protected override async Task OnInitializedAsync() { ViewModel.PropertyChanged += OnViewModelPropertyChanged; await ViewModel.InitAsync(); await base.OnInitializedAsync(); } private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e) { if (e.PropertyName == nameof(ViewModel.RootNode)) { UpdateTree(); } } private void UpdateTree() { _treeViewItems.Clear(); _treeViewItems.Add(ParseTreeViewItem(ViewModel.RootNode)); StateHasChanged(); return; ITreeViewItem ParseTreeViewItem(WorkSequenceNode node) { var ret = new TreeViewItem(node.WorkId.ToString(), node.Children.Select(ParseTreeViewItem)) { Expanded = true }; if (node.WorkId == ViewModel.FocusedWorkId) { _selectedItem = ret; } return ret; } } }
我已经尝试过的解决方法
为了解决这个问题,我试了好几种方法,但都没有效果:
- 不在构造
TreeViewItem时设置Expanded属性:结果所有节点初始都是折叠状态,且依然无法切换展开 - 监听
OnExpandedChange事件,手动反转Expanded属性的值:完全没有任何效果 - 修改
FluentTreeView的LazyLoadItems属性:没有产生任何变化 - 给每个
TreeViewItem的构造函数显式传入唯一ID:这个操作让我可以选中其他节点了,但依然解决不了子节点的折叠/展开问题
有没有朋友碰到过类似的问题?或者能帮我排查下代码里的问题所在吗?非常感谢!
内容来源于stack exchange
相关产品推荐
相关产品推荐

