.NET MAUI條碼掃描器

先決條件

1. Visual Studio 2022
2. Visual Studio 中的 .NET MAUI項目

安裝IronBarcode庫

我們可以使用NuGet安裝IronBarcode庫 Package Manager Console。 若要在 Visual Studio 中開啟此控制台，請導航至 Tools > NuGet Package Manager > Package Manager Console。 然後，在控制台中輸入以下命令：

Install-Package BarCode

此控制台命令將在 MAUI 專案中下載最新版本的IronBarcode庫。 或者，您也可以在NuGet網站上搜尋最新版本的NuGet套件。

前端

第一步是創建前端設計。 為此，我們將建立一個包含兩個按鈕、一個文字區域和一個圖像框的佈局。 一個按鈕用於選擇條碼，另一個按鈕用於複製條碼的文字。 "圖像"框將顯示所選圖像。

將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="MAUI_Barcode.MainPage">

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

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="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="MAUI_Barcode.MainPage">

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

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

所有元素垂直堆疊，位於中心位置。 您可以根據自己的喜好進行更改。

使用IronBarcode進行條碼掃描

本節將介紹使用IronBarcode庫掃描條碼的程式碼。 首先，我們將使用 FilePicker 來選擇檔案並指定映像的檔案類型。 之後，我們將使用 FullPath 屬性來檢索影像檔案的路徑，然後將影像框的來源設為 FullPath 值。 最後，我們將使用 path 值作為 Read 函數中的 BarcodeReader 來檢索文字。

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}

下面的程式碼將用於複製文本編輯器中的文本，並向使用者顯示提示訊息，告知文本已被複製。

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}

You can find the project source code in this article on GitHub.

輸出

項目運行後，您將看到以下輸出。 圖片尚未顯示，因為它尚未被選取。

未選擇影像時的輸出

選取條碼後，它將顯示如下截圖所示，二維碼的輸出文字將顯示在編輯器中。

選擇影像後的輸出

點擊"複製"按鈕將觸發先前提到的警告視窗出現。

複製提醒