.NET MAUI QR Code Scanner

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

Introducción

.NET MAUI (.NET Multi-platform App UI) 是一個跨平台框架,用於從單一C#程式碼庫構建原生移動和桌面應用程式。 一個單一的專案可以針對Android、iOS、macOS和Windows,跨所有平台共享UI佈局和業務邏輯。 MAUI與.NET生態系統的整合意味著開發者可以在不放棄熟悉工具或語言的情況下接觸移動使用者。

在本文中,我們將解釋如何在.NET MAUI應用程式中使用IronQR來構建原生QR碼掃描器,解碼從裝置的相冊中選擇的QR碼。

IronQR: C# QR碼程式庫

為了在應用程式中讀取QR碼,我們將使用IronQR .NET程式庫。 它提供一個簡單的API,可以從任何圖像來源檢測和解碼QR碼,包括在移動裝置上選擇的文件。IronQR可以運行在所有MAUI目標平台上,並且不需要條碼領域的知識即可整合。

IronQR可以解碼標準QR碼、Micro QR碼和rMQR碼,並接受圖像輸入作為文件、流或位圖。 可以通過NuGet包管理器在幾秒鐘內安裝。

步驟構建QR碼掃描器在.NET MAUI

按照這些步驟將QR碼掃描新增到.NET MAUI應用程式中。

先決條件

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

安裝IronQR

使用Visual Studio中的NuGet套件管理器控制台安裝IronQR程式庫。 導航到Tools > NuGet Package Manager > Package Manager Console並運行:

Install-Package IronQR

或者,在NuGet上搜索IronQR並安裝最新版本。

前端設計

掃描器UI由一個按鈕觸發圖片選擇、一個圖像視圖預覽選擇的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 Code作為測試圖像。 將其保存到您的裝置,然後通過應用程式的檔案選擇器選擇它。 解碼值應顯示為https://ironsoftware.com

編碼 https://ironsoftware.com 的範例 QR 碼,用於測試 .NET MAUI QR 掃描器

範例QR Code — 編碼https://ironsoftware.com

使用IronQR進行QR碼掃描

當點擊掃描按鈕時,FilePicker打開裝置的圖像庫。 在使用者選擇照片後,全路徑被載入到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上運行,而無需任何特定於平台的程式碼。 IEnumerable<QrResult>,每個在圖像中找到的QR碼都有一個條目。

輸出

選擇一個QR碼圖像會觸發掃描。 解碼的值顯示在圖像預覽下方的結果標籤中。

使用 IronQR 的 .NET MAUI QR Code 掃描器 — 應用程式選取 QR code 影像並顯示解碼後的值

選擇的QR碼和解碼的值顯示在結果標籤中

下載專案

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

結論

在本文中,我們展示了如何在.NET MAUI應用程式中使用IronQR來構建原生QR碼掃描器。 FilePicker API提供了Android、iOS和Windows上的平台原生圖像選擇,而IronQR的QrReader.Read在單次調用中處理解碼。 通過遍歷完整的結果集合而不是調用.First(),相同的方法可以擴展到每張圖像的多個QR碼。

IronQR需要許可證才能用於開發和商業用途。 授權詳情可在這裡查閱。

欲了解更多超越數值以外的QR碼屬性解析,請參閱讀取QR碼數值讀取QR碼型別指南。

常見問題

.NET MAUI QR Code Scanner Tutorial 是關於什麼的?

.NET MAUI QR Code Scanner Tutorial 提供了使用 IronQR 建立 QR code 掃描器的指導,並為 Android、iOS 和 Windows 平台的 .NET MAUI 應用程式量身定制了說明。

.NET MAUI QR Code Scanner 支援哪些平台?

.NET MAUI QR Code Scanner 支援 Android、iOS 和 Windows 平臺,允許開發者使用 IronQR 建立跨平台應用程式。

如何在 .NET MAUI 應用程式中選擇用于 QR code 掃描的圖片?

您可以在 .NET MAUI 應用程式中使用 FilePicker 元件選擇圖片,然後由 IronQR 的 QrReader.Read() 方法處理以解碼 QR code。

教學中使用哪個函式來解碼 QR code?

在該教學中,使用 IronQR 的 QrReader.Read() 函式來解碼 .NET MAUI 應用程式中所選圖片中的 QR code。

我可以使用 IronQR 在跨平台應用程式中進行 QR code 掃描嗎?

是的,IronQR 設計用於跨平台應用程式,並且借助 .NET MAUI 框架,您可以為 Android、iOS 和 Windows 建立 QR code 掃描器。

在 .NET MAUI 中是否有特定的 QR code 讀取函式?

是的,該教學展示了如何在 .NET MAUI 應用程式中使用 IronQR 的 QrReader.Read() 函式來讀取和解碼 QR code。

IronQR 是否支持行動裝置上的 QR code 掃描?

IronQR 支援行動裝置上的 QR code 掃描,包括 Android 和 iOS,如 .NET MAUI QR Code Scanner Tutorial 所示。

FilePicker 在 QR code 掃描過程中扮演什麼角色?

FilePicker 用於從裝置儲存中選擇圖片,然後將其傳遞給 IronQR 的 QrReader.Read() 進行 QR code 解碼。

是否可以使用 .NET MAUI 將 QR code 掃描器整合到 Windows 應用程式中?

是的,.NET MAUI QR Code Scanner Tutorial 展示瞭如何使用 IronQR 將 QR code 掃描器整合到 Windows 應用程式中。

Curtis Chau
技術作家

Curtis Chau擁有Carleton大學的電腦科學學士學位,專精於前端開發,擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面,喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發,Curtis對物聯網(IoT)有濃厚的興趣,探索創新的方法來整合硬體和軟體。在空閒時間,他喜歡玩遊戲和建立Discord機器人,結合他對技術的熱愛與創造力。

準備好開始了嗎?
Nuget 下載 70,398 | 版本: 2026.7 剛剛發布
Still Scrolling Icon

還在滾動?

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