.NET MAUI 條碼掃描器
介紹
.NET MAUI(.NET 多平台應用程式使用者介面)是一個跨平台框架,可透過單一 C# 程式碼庫來建置原生行動裝置與桌面應用程式。 單一專案可同時針對 Android、iOS、macOS 和 Windows 平台,並在所有平台上共享使用者介面佈局與業務邏輯。 MAUI 與 .NET 生態系統的整合,意味著開發人員無需捨棄熟悉的工具或語言,即可觸及行動裝置使用者。
本文將說明如何在 .NET MAUI 應用程式中,利用 IronQR 建置原生 QR 碼掃描器,以解碼從裝置相片庫中選取的 QR 碼。
如何在 .NET MAUI 中建立 QR 碼掃描器
- 安裝 IronQR C# 程式庫,即可在行動裝置上掃描 QR 碼
- 在 `MainPage.xaml` 中設計應用程式佈局
- 使用 `FilePicker` 讓使用者從裝置中選取 QR 碼圖片
- 載入圖片並將其封裝在 `QrImageInput` 中
- 呼叫 `Read` 並在 `Label` 中顯示解碼後的值
IronQR:C# 二維碼庫
要在應用程式中讀取 QR 碼,我們將使用 IronQR .NET 程式庫。 它提供了一個直觀的 API,可從任何圖像來源(包括在行動裝置上選取的檔案)偵測並解碼 QR 碼。IronQR 可在所有 MAUI 目標平台上運行,且無需具備 BarCode 領域的專業知識即可進行整合。
IronQR 能解碼標準 QR 碼、Micro QR 碼及 rMQR 碼,並接受以檔案、串流或位圖形式輸入的圖像。 可透過 NuGet 套件管理員在數秒內完成安裝。
在 .NET MAUI 中建立 QR 碼掃描器的步驟
請按照以下步驟,在 .NET MAUI 應用程式中新增 QR 碼掃描功能。
先決條件
- 已安裝 .NET MAUI 工作負載的 Visual Studio 2022
- 針對 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>
範例輸入
請使用下方的 QR 碼作為測試圖片。 請將其儲存至您的裝置,然後透過應用程式的檔案選擇器選取該檔案。 解碼後的值應顯示為 https://ironsoftware.com。
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
FilePicker.Default.PickAsync 由 MAUI 平台抽象層提供,可在 Android、iOS 和 Windows 上運行,無需任何特定於平台的程式碼。 AnyBitmap.FromFile 負責處理影像解碼,而 QrReader.Read 會回傳一個 IEnumerable<QrResult>,其中包含影像中每個 QR 碼對應的一筆記錄。
輸出
選取 QR 碼圖片即可觸發掃描。 解碼後的值會顯示在圖片預覽下方的結果標籤中。
選取的 QR 碼及其解碼後的值將顯示於結果標籤中
下載專案
結論
在本文中,我們示範了如何使用 IronQR 在 .NET MAUI 應用程式中建置原生 QR 碼掃描器。 FilePicker API 在 Android、iOS 和 Windows 平台上提供原生圖片選取功能,而 IronQR 的 QrReader.Read 則能透過單一呼叫完成解碼。 若需處理單張圖片中的多個 QR 碼,可透過遍歷完整的結果集合來實現,無需呼叫 .First()。
IronQR 需取得授權方可進行開發及商業用途。 授權詳情請參閱此處。

