MAUI Blazor学习19-角标（右上角红点）

MAUI Blazor系列目录

角标（右上角红点）在各类软件中广泛应用，用来提示有新消息，提醒用户查看。安卓和iOS原生支持在导航栏菜单添加角标，MAUI Blazor是网页，需要借助css实现角标效果。很多网站的页面也有角标，可以查看网页源代码，参考着改一下。问AI也可以，给出的答案大同小异。

采用Bootstrap badge组件方案

MAUI Blazor项目模板自带bootstrap组件库，可以直接使用badge组件，用来呈现带数字的角标，效果能凑合。

在MablaApp项目中，修改导航栏菜单Todo，增加一个角标组件。如果消息数量大于0，就显示角标组件。采用弱引用的WeakReferenceMessenger订阅消息，防止内存泄露。需要NuGet安装CommunityToolkit.Mvvm。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Shared\NavMenu.razor

        <div class="navbarApp-item">
            <NavLink class="navbarApp-link" href="fetchdata">
                <div class="d-flex justify-content-between">
                    <span class="navbarApp-linkIcon oi oi-list-rich" aria-hidden="true"></span>
                    @if (MsgCount > 0)
                    {
                        <span class="badge rounded-pill bg-danger">@MsgCount</span>
                    }
                </div>
                <span class="navbarApp-linkLabel">@AppRes.Todo</span>
            </NavLink>
        </div>

    private int MsgCount = 0;

    private async void UpdateCount(object sender, TaskCounterMsg taskCounterMsg)
    {
        MsgCount = taskCounterMsg.Count;

        await InvokeAsync(() => StateHasChanged());
    }

    protected override void OnInitialized()
    {
        Debug.WriteLine($"{DateTime.Now}, NavMenu.OnInitialized, 订阅TaskCounterMsg");

        WeakReferenceMessenger.Default.Register<TaskCounterMsg>(this, UpdateCount);
    }

    public void Dispose()
    {
        // 取消注册消息接收，避免内存泄漏
        WeakReferenceMessenger.Default.UnregisterAll(this);

        Debug.WriteLine($"{DateTime.Now}, NavMenu.Dispose, 退订TaskCounterMsg");
    }

新增一个测试角标的页面，点击菜单递增消息数量，广播消息，导航栏组件订阅了消息，会自动更新角标显示。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\TestBadge.razor

@page "/testbadge"
@using CommunityToolkit.Mvvm.Messaging

<h3>角标（右上角红点）</h3>
<p class="m-4" role="status">当前消息数量: @currentCount</p>
<button class="btn btn-primary m-4" @onclick="IncrementCount">递增消息数量</button>

@code {
    private int currentCount = 0;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            WeakReferenceMessenger.Default.Send(new TaskCounterMsg(currentCount));
        }
    }

    private void IncrementCount()
    {
        currentCount++;
        if (currentCount > 10)
            currentCount = 0;

        WeakReferenceMessenger.Default.Send(new TaskCounterMsg(currentCount));
    }
}

采用CSS方案

采用CSS方案实现右上角红点。首先要设置红点的容器元素采用相对定位，然后在容器内部添加一个span，采用绝对定位，在右上角绘制一个红色实心圆圈。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Shared\NavMenu.razor.css

.reddotbox {
    position: relative;
}

.reddot {
    position: absolute;
    top: 0;
    right: -8px;
    background-color: red;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

在导航栏的home菜单添加右上角红点，如果消息数量对于0，就显示红点。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Shared\NavMenu.razor

        <div class="navbarApp-item">
            <NavLink class="navbarApp-link" href="" Match="NavLinkMatch.All">
                <span class="navbarApp-linkIcon oi oi-home reddotbox" aria-hidden="true">
                    @if (MsgCount > 0)
                    {
                        <span class="reddot"></span>
                    }
                </span>
                <span class="navbarApp-linkLabel">@AppRes.Home</span>
            </NavLink>
        </div>

测试

在VS2022调试运行MablaApp项目，进入测试角标页面，点击增加消息数量，可以看到导航栏菜单角标数字、右上角红点变化。

DEMO代码地址：https://gitee.com/woodsun/mauiblazorapp

posted on 2024-10-31 22:54 SunnyTrudeau 阅读(31) 评论(0) 编辑收藏举报