.NET MAUI Scanner de Código QR

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

Introdução

.NET MAUI (Interface de Aplicações Multiplataforma .NET) é um framework multiplataforma para desenvolver aplicativos nativos móveis e de desktop a partir de uma única base de código C#. Um único projeto pode ter como alvo Android, iOS, macOS e Windows, compartilhando layouts de UI e lógica de negócios em todas as plataformas. A integração do MAUI com o ecossistema .NET significa que os desenvolvedores podem alcançar usuários móveis sem abandonar as ferramentas ou linguagens familiares.

Neste artigo, explicaremos como construir um scanner de código QR nativo em uma aplicação .NET MAUI usando o IronQR para decodificar códigos QR selecionados na biblioteca de fotos do dispositivo.

IronQR: Biblioteca de Código QR C

Para ler códigos QR na aplicação, usaremos a biblioteca .NET IronQR. Ela fornece uma API direta para detectar e decodificar códigos QR de qualquer fonte de imagem, incluindo arquivos selecionados em um dispositivo móvel. O IronQR é executado em todas as plataformas alvo do MAUI e não requer conhecimento de domínio de código de barras para integração.

O IronQR pode decodificar códigos QR padrão, Micro QR e rMQR, aceitando entrada de imagem como arquivos, streams ou bitmaps. Pode ser instalado em segundos via o Gerenciador de Pacotes NuGet.

Passos para Construir um Scanner de Código QR no .NET MAUI

Siga estes passos para adicionar o escaneamento de código QR a uma aplicação .NET MAUI.

Pré-requisitos

  1. Visual Studio 2022 com a carga de trabalho .NET MAUI instalada
  2. Um projeto .NET MAUI visando Android ou iOS

Instalar o IronQR

Instale a biblioteca IronQR usando o Console do Gerenciador de Pacotes NuGet no Visual Studio. Navegue até Tools > NuGet Package Manager > Package Manager Console e execute:

Install-Package IronQR

Alternativamente, procure por IronQR no NuGet e instale a versão mais recente.

Design Frontal

A interface do scanner consiste em um botão para acionar a seleção de imagem, uma visualização de imagem para pré-visualizar o código QR selecionado e um rótulo para exibir o resultado decodificado.

Substitua o conteúdo de MainPage.xaml pelo seguinte:

<?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

Exemplo de Entrada

Use o código QR abaixo como imagem de teste. Salve-o no seu dispositivo, então selecione-o através do seletor de arquivos do aplicativo. O valor decodificado deve ser exibido como https://ironsoftware.com.

Sample QR code encoding https://ironsoftware.com for testing the .NET MAUI QR scanner

Código QR de exemplo — codifica `https://ironsoftware.com`

Escaneando Códigos QR com IronQR

Quando o botão de digitalização é pressionado, FilePicker abre a biblioteca de imagens do dispositivo. Após o usuário selecionar uma foto, o caminho completo é carregado em um AnyBitmap, que é passado para QrReader.Read(). O valor decodificado do primeiro código QR detectado é exibido no rótulo de resultado.

Adicione o seguinte método a 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;
}
$vbLabelText   $csharpLabel

FilePicker.Default.PickAsync é fornecido pela camada de abstração da plataforma MAUI e funciona no Android, iOS e Windows sem nenhum código específico de plataforma. AnyBitmap.FromFile lida com a decodificação de imagem, e QrReader.Read retorna um IEnumerable<QrResult> com uma entrada por código QR encontrado na imagem.

Saída

Selecionar uma imagem de código QR dispara o escaneamento. O valor decodificado aparece no rótulo de resultado abaixo da pré-visualização da imagem.

.NET MAUI QR Code Scanner using IronQR — app selecting a QR code image and displaying the decoded value

Código QR selecionado e valor decodificado exibido no rótulo de resultado

Baixar o Projeto

Clique aqui para baixar o projeto completo MauiQrScanner.

Conclusão

Neste artigo, demonstramos como construir um scanner de código QR nativo em uma aplicação .NET MAUI usando o IronQR. A API FilePicker fornece seleção de imagem nativa da plataforma no Android, iOS e Windows, enquanto QrReader.Read do IronQR trata a decodificação em uma única chamada. A mesma abordagem escala para múltiplos códigos QR por imagem ao iterar sobre a coleção completa de resultados em vez de chamar .First().

O IronQR requer uma licença para desenvolvimento e uso comercial. Detalhes de licenciamento estão disponíveis aqui.

Para uma visão mais profunda sobre a leitura de propriedades de código QR além do valor, veja os guias Ler Valor de Código QR e Ler Tipo de Código QR.

Curtis Chau
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais
Pronto para começar?
Nuget Downloads 61,359 | Versão: 2026.3 acaba de ser lançado
Still Scrolling Icon

Ainda está rolando a tela?

Quer provas rápidas? PM > Install-Package IronQR
executar um exemplo Veja seu URL se transformar em um código QR.