You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 06:53:05