如何在点击MudBlazor的MudTabPanel时调用SetColor方法

你可以通过以下两种方式在保留@bind-ActivePanelIndex="activeIndex"的前提下，触发SetColor方法来更新MyBox的背景色：

方案一：给activeIndex添加属性 setter 逻辑 #

修改activeIndex的定义，将其改为带 getter 和 setter 的属性，在 setter 中调用SetColor方法。这样每当@bind更新activeIndex时，都会自动触发颜色设置逻辑：

<MudTabs Elevation="0" Outlined="true" @bind-ActivePanelIndex="activeIndex">
    <MudTabPanel Text="Red"></MudTabPanel>
    <MudTabPanel Text="Blue"></MudTabPanel>
</MudTabs>

<MyBox colorBox="@colorMe"/>

@code
{
    private int _activeIndex = 0;
    // 改为属性，通过setter触发SetColor
    public int activeIndex
    {
        get => _activeIndex;
        set
        {
            _activeIndex = value;
            SetColor();
            // 若UI未自动刷新，可添加StateHasChanged();
        }
    }
    string colorMe = "red"; // 初始化默认颜色，对应初始activeIndex=0
    
    void SetColor()
    {
        colorMe = activeIndex switch
        {
            0 => "red",
            1 => "blue",
            _ => "" // 处理其他索引情况
        };
    }
}

方案二：利用MudTabs的OnActivePanelIndexChanged事件（展开@bind语法糖） #

将@bind拆分为显式的属性绑定和变更事件处理，既保留原有的索引赋值逻辑，又调用SetColor方法。这种方式没有删除@bind的核心功能，只是展开了语法糖：

<MudTabs Elevation="0" Outlined="true" 
         ActivePanelIndex="activeIndex"
         ActivePanelIndexChanged="OnIndexChanged">
    <MudTabPanel Text="Red"></MudTabPanel>
    <MudTabPanel Text="Blue"></MudTabPanel>
</MudTabs>

<MyBox colorBox="@colorMe"/>

@code
{
    int activeIndex = 0;
    string colorMe = "red";
    
    void OnIndexChanged(int newIndex)
    {
        activeIndex = newIndex; // 保留原@bind的赋值逻辑
        SetColor();
    }
    
    void SetColor()
    {
        if(activeIndex == 0)
        {
            colorMe = "red";
        } 
        else if(activeIndex == 1)
        {
            colorMe = "blue";
        } 
    }
}

补充说明 #

• 初始化colorMe为"red"，确保页面加载时MyBox就有对应初始Tab的背景色。
• 方案一中的switch表达式可替换为你原有的if-else逻辑，效果一致。

内容的提问来源于stack exchange，提问作者Yurii.V.