如何在 .NET MAUI 中生成 QR 码

在本文中，我们将探讨如何使用 .NET MAUI（一种用于构建跨平台应用程序的现代框架）创建 QR 代码生成器。我们将利用 IronBarcode 库生成二维码并将其显示在屏幕上。

什么是 .NET MAUI？

.NET MAUI (多平台应用程序用户界面) .NET MAUI 是 Xamarin 窗体框架的进化版，允许开发人员使用单个代码库为多个平台构建本地用户界面。利用 .NET MAUI，您可以创建 Android、iOS、macOS、Windows 等更多应用程序，从而减少开发时间和工作量。

介绍 IronBarcode

IronBarcode 是一款适用于 .NET 应用程序的功能强大的条形码和 QR 码生成库。它提供了一个易于使用的 API，用于创建各种类型的条形码，包括 QR 码，并可自定义设置，如大小、纠错和编码选项。

设置 .NET MAUI 项目

首先，我们需要在 Microsoft Visual Studio 2022 中创建一个新的 .NET MAUI 项目。您也可以使用 Microsoft Visual Studio Code，但步骤会有所不同。不过，建议使用 Visual Studio。请按照以下步骤创建项目。

打开 Visual Studio 2022。将出现如下屏幕

单击 "创建新项目 "并搜索 MAUI 模板，如下图所示。

选择 .NET MAUI 应用程序模板，然后单击 "下一步 "按钮。将出现以下窗口。

为项目命名，选择位置，然后单击 "下一步 "按钮，如下图所示窗口将出现。

选择 .NET Framework。我选择的是 .NET 7，你也可以选择 .NET 6.0。创建的项目如下图所示。

本教程主要侧重于在本地 Windows 机器上初始部署 .NET MAUI 应用程序。您可以根据自己的要求，在 Android 或 iOS 模拟器上使用相同的代码库进行配置。

要在本地 Windows 机器上部署 .NET MAUI 应用程序，可以使用 Visual Studio 按照以下步骤操作：

1.确保调试目标设置为 "Windows 机器"。如果没有，请从工具栏的下拉菜单中选择 "Windows 机器"。

2.单击 "Start Debugging（开始调试）"按钮或按 F5 键，在 Windows 机器上构建并运行应用程序。

![如何在 .NET MAUI 中生成 QR 码：图 6](/static-assets/barcode/blog/net-maui-qr-code-generator-tutorial/net-maui-qr-code-generator-tutorial-6.webp)

如果 Windows 机器上未启用开发者模式，Visual Studio 会提示您启用该模式。为此，请按照以下步骤操作：

1.在 Visual Studio 显示的 "启用 Windows 开发人员模式 "对话框中，找到标有 "开发人员设置 "的链接。

![如何在 .NET MAUI 中生成 QR 码：图 7](/static-assets/barcode/blog/net-maui-qr-code-generator-tutorial/net-maui-qr-code-generator-tutorial-7.webp)

2.点击 "开发人员设置 "链接。这将打开 Windows 机器上的 "设置 "应用程序。

3.打开开发者模式下的切换开关，如下图所示。

![如何在 .NET MAUI 中生成 QR 码：图 8](/static-assets/barcode/blog/net-maui-qr-code-generator-tutorial/net-maui-qr-code-generator-tutorial-8.webp)

打开开发模式后运行项目。将出现以下窗口：

这是 Visual Studio 2022 在创建项目时自动创建的模板应用程序。现在，我们将安装 IronBarcode 并按照要求修改代码。

安装 IronBarcode

安装 IronBarcode打开 NuGet 包管理器控制台。要在 Visual Studio 中打开软件包管理器控制台，可以按照以下步骤操作：

1.在 Windows 机器上启动 Visual Studio。

2.打开要处理的项目或创建一个新项目。

3.在 Visual Studio 菜单中，转到 "工具"。

4.从下拉菜单中点击 "NuGet 包管理器"。

5.另一个下拉菜单会出现，你应该选择 "软件包管理器控制台"。

软件包管理器控制台 "窗口将打开，为你提供一个命令行界面来管理项目中的 NuGet 软件包。编写以下命令 包管理器控制台。

:PackageInstall

这将把 IronBarcode 库添加到您的项目中，并使其可用。

使用 IronBarcode 生成 .NET MAUI QR 码

现在，让我们编写代码，创建自己的 QR 代码生成器移动应用程序。为了在屏幕上显示生成的 QR 代码，我们将利用 .NET MAUI 的功能。打开 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="QrCodeGeneratorMAUI.MainPage">

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

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                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="QrCodeGeneratorMAUI.MainPage">

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

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

上面的 XAML 代码表示一个可以生成 QR 代码的 .NET MAUI 页面。下面是对 .NET MAUI 组件的简单解释：

• `的目的组件用于在屏幕上显示文本。在本应用程序中，它用于显示欢迎信息和标题，为用户提供信息和说明。
• <Entry>:的组件用于为用户提供一个文本输入框。在本应用程序中，它允许用户输入想要编码到二维码中的内容。
• <Image>:的组件用于在屏幕上显示图像。在本应用程序中，它用于在用户点击生成按钮后向其显示生成的二维码图像。
• <Button>:的组件代表一个可点击的按钮。它允许用户在点击时触发操作。在本应用程序中，该按钮用于根据用户在"......"中输入的内容启动二维码的生成。领域。

这些组件共同创建了一个界面，用户可以输入文本，点击按钮，然后看到屏幕上显示相应的二维码。

现在，让我们编写生成二维码的后台代码。现在，打开 MainPage.xaml.cs 文件，更新代码隐藏类如下：

using IronBarCode;

namespace QrCodeGeneratorMAUI;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }
}

using IronBarCode;

namespace QrCodeGeneratorMAUI;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }
}

Imports IronBarCode

Namespace QrCodeGeneratorMAUI

	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			Dim text As String = qrCodeText.Text
			Dim qrCode = QRCodeWriter.CreateQrCode(text)
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

下面是代码解释。

1.OnButtonClicked" 方法是按钮单击事件的事件处理程序。当按钮被点击时，此方法将被执行。

2.在 OnButtonClicked 方法中，包含在 qrCodeText 输入字段中的文本会被赋值给文本变量。

3.QRCodeWriter.CreateQrCode(文本)用于根据输入的文本创建 QR 码。

4.`qrCode.ToJpegBinaryData()将 QR 码转换为二进制 JPEG 数据。

5.qrCodeImage.Source = ImageSource.FromStream(() => 新内存流(qrCodeBytes))设置qrCodeImage` 控件的源，以显示生成的二维码图像。

运行 .NET MAUI 应用程序

让我们运行项目来测试其功能。按 F5 键在 Windows 机器上运行应用程序。运行项目时会出现以下界面。

在文本文件中输入要编码的文本，然后点击 "生成 QR 码 "按钮。QR 代码就会生成并显示在屏幕上，如下图所示。

添加注释和 QR 码值

现在，我们已经开发出了具有基本功能的 QR 代码生成器。让我们为 QR 代码添加 QR 代码注释和 QR 代码值，使其功能更加强大。修改 OnButtonClicked 方法，如以下源代码所示。

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim text As String = qrCodeText.Text
	Dim qrCode = QRCodeWriter.CreateQrCode(text)
	qrCode.AddBarcodeValueTextBelowBarcode()
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

• `qrCode.AddBarcodeValueTextBelowBarcode()在生成的条形码下方添加 QR 码值的文本。
• `qrCode.AddAnnotationTextAboveBarcode("我的 QR 代码由 .NET MAUI 应用程序生成)在条形码上方添加注释文本，说明条形码是由 .NET MAUI 应用程序生成的。

Visual Studio 2022 为 .NET MAUI 应用程序提供了热重载选项。更改 "OnButtonClicked "后，点击 "Hot reload"，更改就会出现，您可能不需要关闭和重建应用程序。

输入要编码的文本，然后点击 "生成 QR 码 "按钮。生成的 QR 码如下图所示。

IronBarcode 还提供其他有用的功能，如添加图像、着色和调整 QR 码大小等。更多详情 教程 和 代码示例您可以参考他们的 官方文件.

.NET MAUI 条码生成器

您也可以在 IronBarcode 库的帮助下创建 .NET MAUI 条码生成器。您只需在代码中稍作改动，就可以如以下代码示例所示使用了。

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
		Dim text As String = barCodeText.Text
		Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)
		barCode.AddBarcodeValueTextBelowBarcode()
		barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
		Dim qrCodeBytes = barCode.ToJpegBinaryData()
		barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

输出

除了学习如何使用 .NET MAUI 和 IronBarcode 库创建 QR 码生成器外，值得一提的是 IronBarcode 的定价方面。

IronBarcode 免费开发，并提供 免费试用 和不同的定价计划，以满足各种商业目的的需求。定价基于 许可选项其中包括用于内部部署的永久许可证，以及用于基于云的部署的订购型许可证。

结论

在本文中，我们学习了如何创建一个 二维码生成器 以及使用 .NET MAUI 和 IronBarcode 库的条形码生成器。我们探讨了安装 IronBarcode、创建 QR 代码并使用 .NET MAUI 的图像控件将其显示在屏幕上的步骤。

.NET MAUI 为构建跨平台应用程序提供了强大的框架，而 IronBarcode 则简化了生成条形码和二维码的过程。通过结合这些技术，您可以创建多功能、高效的应用程序，充分利用现代设备的功能。