MAUI Blazor學習19-角標（右上角紅點）

SunnyTrudeau發表於2024-10-31
UIBlazor

MAUI Blazor學習19-角標（右上角紅點）

MAUI Blazor系列目錄

  1. MAUI Blazor學習1-移動客戶端Shell佈局 - SunnyTrudeau - 部落格園 (cnblogs.com)
  2. MAUI Blazor學習2-建立移動客戶端Razor頁面 - SunnyTrudeau - 部落格園 (cnblogs.com)
  3. MAUI Blazor學習3-繪製ECharts圖表 - SunnyTrudeau - 部落格園 (cnblogs.com)
  4. MAUI Blazor學習4-繪製BootstrapBlazor.Chart圖表 - SunnyTrudeau - 部落格園 (cnblogs.com)
  5. MAUI Blazor學習5-BLE低功耗藍芽 - SunnyTrudeau - 部落格園 (cnblogs.com)
  6. MAUI Blazor學習6-掃描二維碼 - SunnyTrudeau - 部落格園 (cnblogs.com)
  7. MAUI Blazor學習7-實現登入跳轉頁面 - SunnyTrudeau - 部落格園 (cnblogs.com)
  8. MAUI Blazor學習8-支援多語言 - SunnyTrudeau - 部落格園 (cnblogs.com)
  9. MAUI Blazor學習9-VS Code開發除錯MAUI入門 - SunnyTrudeau - 部落格園 (cnblogs.com)
  10. MAUI Blazor學習10-BarcodeScanner掃描二維碼 - SunnyTrudeau - 部落格園 (cnblogs.com)
  11. MAUI Blazor學習11-百度地圖定位 - SunnyTrudeau - 部落格園 (cnblogs.com)
  12. MAUI Blazor學習12-檔案另存為 - SunnyTrudeau - 部落格園 (cnblogs.com)
  13. MAUI Blazor學習13-開啟檔案 - SunnyTrudeau - 部落格園 (cnblogs.com)
  14. MAUI Blazor學習14-選擇目錄 - SunnyTrudeau - 部落格園 (cnblogs.com)
  15. MAUI Blazor學習15-採用html2pdf.js生成pdf - SunnyTrudeau - 部落格園 (cnblogs.com)
  16. MAUI Blazor學習16-連續按BACK退出APP - SunnyTrudeau - 部落格園 (cnblogs.com)
  17. MAUI Blazor學習17-NavigationLock阻止頁面回退 - SunnyTrudeau - 部落格園 (cnblogs.com)
  18. MAUI Blazor學習18-自動升級 - SunnyTrudeau - 部落格園

角標（右上角紅點）在各類軟體中廣泛應用，用來提示有新訊息，提醒使用者檢視。安卓和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

相關文章