.NET MAUI QR Code Scanner
Introducción
.NET MAUI (.NET Multi-platform App UI) 是一個跨平台框架,用於從單一C#程式碼庫構建原生移動和桌面應用程式。 一個單一的專案可以針對Android、iOS、macOS和Windows,跨所有平台共享UI佈局和業務邏輯。 MAUI與.NET生態系統的整合意味著開發者可以在不放棄熟悉工具或語言的情況下接觸移動使用者。
在本文中,我們將解釋如何在.NET MAUI應用程式中使用IronQR來構建原生QR碼掃描器,解碼從裝置的相冊中選擇的QR碼。
如何在.NET MAUI中構建QR碼掃描器
- 安裝IronQR C#程式庫以在移動裝置上掃描QR碼
- 在
MainPage.xaml中設計應用程式佈局 - 使用
FilePicker讓使用者從裝置中選擇QR碼圖片 - 載入圖像並將其包裝在
QrImageInput中 - 調用
Read並在Label中顯示解碼值
IronQR: C# QR碼程式庫
為了在應用程式中讀取QR碼,我們將使用IronQR .NET程式庫。 它提供一個簡單的API,可以從任何圖像來源檢測和解碼QR碼,包括在移動裝置上選擇的文件。IronQR可以運行在所有MAUI目標平台上,並且不需要條碼領域的知識即可整合。
IronQR可以解碼標準QR碼、Micro QR碼和rMQR碼,並接受圖像輸入作為文件、流或位圖。 可以通過NuGet包管理器在幾秒鐘內安裝。
步驟構建QR碼掃描器在.NET MAUI
按照這些步驟將QR碼掃描新增到.NET MAUI應用程式中。
先決條件
- Visual Studio 2022,安裝了.NET MAUI工作負載
- 針對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>
範例輸入
使用以下QR Code作為測試圖像。 將其保存到您的裝置,然後通過應用程式的檔案選擇器選擇它。 解碼值應顯示為https://ironsoftware.com。
範例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
FilePicker.Default.PickAsync由MAUI平台抽象層提供,可在Android、iOS和Windows上運行,而無需任何特定於平台的程式碼。 IEnumerable<QrResult>,每個在圖像中找到的QR碼都有一個條目。
輸出
選擇一個QR碼圖像會觸發掃描。 解碼的值顯示在圖像預覽下方的結果標籤中。
選擇的QR碼和解碼的值顯示在結果標籤中
下載專案
結論
在本文中,我們展示了如何在.NET MAUI應用程式中使用IronQR來構建原生QR碼掃描器。 FilePicker API提供了Android、iOS和Windows上的平台原生圖像選擇,而IronQR的QrReader.Read在單次調用中處理解碼。 通過遍歷完整的結果集合而不是調用.First(),相同的方法可以擴展到每張圖像的多個QR碼。
IronQR需要許可證才能用於開發和商業用途。 授權詳情可在這裡查閱。
常見問題
.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 應用程式中。

