.NET MAUI 條碼掃描器

This article was translated from English: Does it need improvement?
Translated
View the article in English

介紹

.NET MAUI(.NET 多平台應用程式使用者介面)是一個跨平台框架,可透過單一 C# 程式碼庫來建置原生行動裝置與桌面應用程式。 單一專案可同時針對 Android、iOS、macOS 和 Windows 平台,並在所有平台上共享使用者介面佈局與業務邏輯。 MAUI 與 .NET 生態系統的整合,意味著開發人員無需捨棄熟悉的工具或語言,即可觸及行動裝置使用者。

本文將說明如何在 .NET MAUI 應用程式中,利用 IronQR 建置原生 QR 碼掃描器,以解碼從裝置相片庫中選取的 QR 碼。

IronQR:C# 二維碼庫

要在應用程式中讀取 QR 碼,我們將使用 IronQR .NET 程式庫。 它提供了一個直觀的 API,可從任何圖像來源(包括在行動裝置上選取的檔案)偵測並解碼 QR 碼。IronQR 可在所有 MAUI 目標平台上運行,且無需具備 BarCode 領域的專業知識即可進行整合。

IronQR 能解碼標準 QR 碼、Micro QR 碼及 rMQR 碼,並接受以檔案、串流或位圖形式輸入的圖像。 可透過 NuGet 套件管理員在數秒內完成安裝。

在 .NET MAUI 中建立 QR 碼掃描器的步驟

請按照以下步驟,在 .NET MAUI 應用程式中新增 QR 碼掃描功能。

先決條件

  1. 已安裝 .NET MAUI 工作負載的 Visual Studio 2022
  2. 針對 Android 或 iOS 的 .NET MAUI 專案

安裝 IronQR

請透過 Visual Studio 中的 NuGet 套件管理員主控台安裝 IronQR程式庫。 請導航至 Tools > NuGet Package Manager > Package Manager Console 並執行:

Install-Package IronQR

或者,您也可以在 NuGet 上搜尋 IronQR 並安裝最新版本。

前端設計

掃描器的使用者介面包含一個用於觸發圖片選取的按鈕、一個用於預覽所選 QR 碼的圖片檢視窗,以及一個用於顯示解碼結果的標籤。

請將 MainPage.xaml 中的內容替換為以下內容:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
XML

範例輸入

請使用下方的 QR 碼作為測試圖片。 請將其儲存至您的裝置,然後透過應用程式的檔案選擇器選取該檔案。 解碼後的值應顯示為 https://ironsoftware.com

Sample QR code encoding https://ironsoftware.com for testing the .NET MAUI QR scanner

QR 碼範例 — 編碼網址:`https://ironsoftware.com`

使用 IronQR 掃描 QR 碼

點擊掃描按鈕時,FilePicker 會開啟裝置的圖片庫。 使用者選取照片後,完整路徑會載入 AnyBitmap,並傳遞給 QrReader.Read()。 從第一個偵測到的 QR 碼解碼出的值,將顯示在結果標籤中。

請在 MainPage.xaml.cs 中新增以下方法:

using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}
using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}
Imports IronQr
Imports IronSoftware.Drawing

Private Async Sub OnScanButtonClicked(sender As Object, e As EventArgs)
    ' Start scanning QR codes
    Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
        .PickerTitle = "Pick image",
        .FileTypes = FilePickerFileType.Images
    })
    Dim imageSource = images.FullPath.ToString()

    Dim inputBmp = AnyBitmap.FromFile(imageSource)

    ' Load the asset into QrImageInput
    Dim imageInput As New QrImageInput(inputBmp)

    ' Create a QR Reader object
    Dim reader As New QrReader()

    ' Read the input and get all embedded QR Codes
    Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

    ' Display the first result
    resultLabel.Text = "Scanned Text: " & results.First().Value
End Sub
$vbLabelText   $csharpLabel

FilePicker.Default.PickAsync 由 MAUI 平台抽象層提供,可在 Android、iOS 和 Windows 上運行,無需任何特定於平台的程式碼。 AnyBitmap.FromFile 負責處理影像解碼,而 QrReader.Read 會回傳一個 IEnumerable<QrResult>,其中包含影像中每個 QR 碼對應的一筆記錄。

輸出

選取 QR 碼圖片即可觸發掃描。 解碼後的值會顯示在圖片預覽下方的結果標籤中。

.NET MAUI QR Code Scanner using IronQR — app selecting a QR code image and displaying the decoded value

選取的 QR 碼及其解碼後的值將顯示於結果標籤中

下載專案

點擊此處下載完整的 MauiQrScanner 專案。

結論

在本文中,我們示範了如何使用 IronQR 在 .NET MAUI 應用程式中建置原生 QR 碼掃描器。 FilePicker API 在 Android、iOS 和 Windows 平台上提供原生圖片選取功能,而 IronQR 的 QrReader.Read 則能透過單一呼叫完成解碼。 若需處理單張圖片中的多個 QR 碼,可透過遍歷完整的結果集合來實現,無需呼叫 .First()

IronQR 需取得授權方可進行開發及商業用途。 授權詳情請參閱此處

若要深入了解如何讀取 QR 碼屬性(不僅限於數值),請參閱《讀取 QR 碼數值》與《讀取 QR 碼類型》指南。

Curtis Chau
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位,專注於前端開發,擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面,喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外,Curtis 對物聯網 (IoT) 有著濃厚的興趣,探索將硬體和軟體結合的創新方式。在閒暇時間,他喜愛遊戲並構建 Discord 機器人,結合科技與創意的樂趣。

準備好開始了嗎?
Nuget 下載 63,625 | 版本: 2026.4 剛剛發布
Still Scrolling Icon

還在捲動嗎?

想要快速證明? PM > Install-Package IronQR
執行範例 觀看您的 URL 變成 QR code。