<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • (原創)【MAUI】一步一步實現“懸浮操作按鈕”(FAB,Floating Action Button)

    一、前言

    MAUI,跨平臺的 GUI 框架,基本介紹本文不再贅述。

    話不多說,既然可以跨平臺,那么我們就來實現一個在移動端很常用的控件:懸浮操作按鈕(FAB,Floating Action Button)。

    本文屬于新手向、保姆級教程,大佬們請一笑而過。

    相信看完的你,一定會有所收獲!

    本文地址:http://www.tnepal.com/lesliexin/p/16416656.html


    二、實現原理

    原理很簡單:將界面分為“兩層”,下層是滾動界面,上層是懸浮按鈕。


    三、一步步實現

    (一)創建 MAUI 應用項目

    (本文使用的是:VS2022 Preview)
    啟動VS,按照流程提示,創建 MAUI 應用項目。

    image

    image

    image

    在創建成功后,會自帶一些代碼,可以編譯運行體驗一下。

    image

    (二)清空無關代碼

    這些自帶的代碼,幾乎都是我們用不上的,所以我們對代碼進行一下清理。清理后的代碼如下。

    1,前臺 XAML 代碼。

    image

    2,后臺 CS 代碼。

    image

    (三)布局方式選擇

    首先,懸浮按鈕的位置是在屏幕的右下角,并不隨著屏幕內容的滾動而變化位置。
    所以,我們要使用用“絕對坐標”的方式,讓懸浮按鈕固定在右下角。

    在 MAUI 中,“絕對坐標布局”對應的是:AbsoluteLayout
    在“微軟技術文檔”中,對“AbsoluteLayout”的解釋如下:
    詳見:https://docs.microsoft.com/en-us/dotnet/maui/user-interface/layouts/absolutelayout

    image

    在 XAML 頁面,我們添加布局:

    image

    (四)懸浮按鈕編寫

    因為懸浮按鈕一般而言就是圓形純色背景+功能圖標,所以我們這里使用控件“ImageButton”來實現懸浮按鈕。

    在 XAML 頁面,我們添加“ImageButton”:

    image

    為了使懸浮按鈕一直處于右下角,我們需要用到絕對布局的附加屬性:“AbsoluteLayout.LayoutFlags”和“AbsoluteLayout.LayoutBounds”。
    在“微軟技術文檔”中,對“AbsoluteLayout”的解釋如下:
    詳見:https://docs.microsoft.com/en-us/dotnet/maui/user-interface/layouts/absolutelayout

    image

    image

    在設置“AbsoluteLayout.LayoutFlags”時,因為懸浮按鈕的尺寸是固定的,位置也是固定的,所以我們使用“PositionProportional”,即:“位置”是按比例設置的,而“尺寸”則是按數值設置的。

    image

    既然懸浮按鈕一直是處于右下角,所以我們將“AbsoluteLayout.LayoutBounds”的 x 和 y 都設置為 1:

    image

    (注:下文我們會單獨設置尺寸,之所以不在這里將“AbsoluteLayout.LayoutBounds”設置為“1,1,56,56”,是為了將按鈕圖標縮小到合適的比例,因為這里為了簡單化只用了一個按鈕來實現懸浮按鈕。)

    根據 Android 官方 Material 風格建議,懸浮按鈕的尺寸一般情況下是 56x56。
    詳見:https://material.io/components/buttons-floating-action-button

    image

    我們將按鈕的尺寸設置為56x56,并設置為圓形:

    image

    到這里,我們編譯運行一下,可以看到已經有一個按鈕一直處于窗口的右下角:

    image

    image

    這里我們發現按鈕太靠邊了,所以我們增加點邊距:

    image

    效果如下:

    image

    然后,我們添加一個 PNG 圖片,用作按鈕圖標:

    image

    image

    效果如下:

    image

    已經有懸浮按鈕那味了,但是這個圖標還是有點大了。
    這是因為我添加的 png 圖片像素是 200x200,并沒有進行尺寸縮小。主要是為了防止在高分辨率下變模糊。
    所以接下來,我們對這個圖標進行縮小。

    以 WPF 上的經驗,添加圖片時,是可以設置圖片尺寸的,但是在 MAUI 中,我愣是沒找到如何去實現,殘念。后續再研究研究。

    那這里,我就通過設置 Padding 來變相實現圖標的縮小:

    image

    效果如下:

    image

    到這里,懸浮按鈕已經基本實現完成了,不過還有個問題,那就是在 Android 上(iOS 沒測試),使用了 Padding 后的效果與 Windows 上的效果不一樣,在 Android 上整個按鈕縮小成了一個點(此處忘截圖了)。
    所以,在 Android 端,只能將 Padding 那行代碼刪除掉,然后效果就是未縮小前的圖標。

    接下來,再為懸浮按鈕增加一個點擊事件,彈窗提示一下。

    XAML:

    image

    CS 后臺代碼:
    image

    (五)滾動區域實現

    有了懸浮按鈕,接下來就要增加滾動界面了。
    因為 XAML 一般情況下都是代碼越在下面,控件越在上層顯示,所以我們在 ImageButton 上方添加滾動區域。
    滾動區域是要布滿整個窗口的,所以我們將附件屬性“AbsoluteLayout.LayoutFlags”和“AbsoluteLayout.LayoutBounds”分別設置為 “All” 和 “0,0,1,1”:

    image

    為了演示用,我們增加一個垂直布局控件:

    image

    至于里面的控件,我們通過后臺代碼來動態生成。
    首先為窗體綁定一個加載事件:

    image

    在后臺代碼中,我們動態添加 100 個 Label 控件:

    image


    四、效果演示

    Windows 效果:

    image

    Android 效果:

    image

    iOS 和 MacOS,因為沒有蘋果設備,所以無法測試和演示。


    五、總結

    本文中實現懸浮按鈕的方式,是很簡單的,也很粗略,實現的效果只能說是差強人意。不過作為入門級的教程,還是可以的。

    本人也是新接觸 MAUI,在寫代碼的時候,確確實實感受到了很多“束縛感”,與 WPF 那種自由、靈活完全不同。

    總的來說,個人看來,在寫非Windows端軟件時,MAUI 還是很不錯的,特別是對 C# 人員非常友好,學習門檻很低。

    本人水平有限,難免有所疏漏,歡迎各位讀者評論指正。


    六、源代碼下載

    https://files.cnblogs.com/files/lesliexin/MauiDemoFAB.7z


    -【END】-

    posted @ 2022-06-28 12:22  leslie_xin  閱讀(316)  評論(1編輯  收藏  舉報
    国产美女a做受大片观看