Este artigo explora a criação e personalização de menus de contexto em aplicações Flutter, com foco na compatibilidade com o sistema HarmonyOS. O projeto de exemplo demonstra como implementar funcionalidades avançadas de menus, como submenus, botões customizados e integração com diferentes tipos de widgets.

Introdução ao Plugin

O projeto de exemplo, custom_context_menus, serve como um guia prático para desenvolver menus de contexto interativos. Ele abrange uma gama de cenários:

• Implementação de menus em qualquer ponto da interface.
• Criação de menus hierárquicos (submenus).
• Modificação de botões padrão.
• Utilização de widgets personalizados como itens de menu.
• Adaptação de menus para campos de texto (TextField, EditableText, etc.).
• Exibição de menus em componentes não textuais, como imagens.
• Reordenação de ações padrão.

A adaptação para o HarmonyOS permite que essas funcionalidades sejam aproveitadas em dispositivos que rodam esse sistema operacional.

Integração da Dependência

Como esta é uma versão modificada e adaptada para o HarmonyOS, a inclusão é feita via Git. Adicioen a seguinte configuração ao seu arquivo pubspec.yaml:

dependencies:
 flutter:
   sdk: flutter
 cupertino_icons: ^1.0.2
 url_launcher:
   git:
     url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
     path: "packages/url_launcher/url_launcher"
 

Observação: O pacote context_menus é um projeto de exemplo e não está disponível diretamente no pub.dev. Para utilizá-lo, você pode integrá-lo como um módulo Flutter ou incorporar o código fonte relevante diretamente em seu projeto.

Utilização da API

Componente Principal: ContextMenuRegion

ContextMenuRegion é o widget central para a criação de menus de contexto. Ele detecta interações do usuário (clique com o botão direito ou toque longo) e exibe o menu associado.

import 'package:flutter/material.dart';
import 'package:context_menus/context_menu_region.dart';

ContextMenuRegion(
 child: SeuWidget(), // O widget que ativará o menu
 contextMenuBuilder: (BuildContext context, Offset offset) {
   // Retorna o widget do menu de contexto
   return buildCustomContextMenu(context);
 },
)
 

Exemplos Práticos

Menu de Contexto Simples

Crie um menu básico com opções como Copiar, Cortar e Colar.

ContextMenuRegion(
 child: Container(
   width: 200,
   height: 200,
   color: Colors.blue,
   child: const Center(child: Text('Clique com o botão direito ou toque longo')),
 ),
 contextMenuBuilder: (context, offset) {
   return Card(
     child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
         ListTile(
           leading: const Icon(Icons.copy),
           title: const Text('Copiar'),
           onTap: () {
             // Lógica para copiar
             Navigator.pop(context); // Fecha o menu
           },
         ),
         ListTile(
           leading: const Icon(Icons.cut),
           title: const Text('Cortar'),
           onTap: () {
             // Lógica para cortar
             Navigator.pop(context);
           },
         ),
         ListTile(
           leading: const Icon(Icons.paste),
           title: const Text('Colar'),
           onTap: () {
             // Lógica para colar
             Navigator.pop(context);
           },
         ),
       ],
     ),
   );
 },
)
 

Menu Customizado para TextField

Personalize as opções de menu padrão para campos de texto.

TextField(
 // O contexto do menu é construído com base no estado do campo de texto
 contextMenuBuilder: (context, editableTextState) {
   return AdaptiveTextSelectionToolbar(
     anchors: editableTextState.contextMenuAnchors, // Posições do menu
     children: [
       // Item de menu customizado para copiar
       TextSelectionToolbarItemData(
         label: 'Copiar Personalizado',
         onPressed: () {
           editableTextState.copySelection(SelectionChangedCause.toolbar);
           Navigator.pop(context);
         },
       ),
       // Item de menu customizado para colar
       TextSelectionToolbarItemData(
         label: 'Colar Personalizado',
         onPressed: () {
           editableTextState.pasteText(SelectionChangedCause.toolbar);
           Navigator.pop(context);
         },
       ),
     ],
   );
 },
)
 

Criação de Submenus

Implemente menus com opções aninhadas para organizar funcionalidades.

ContextMenuRegion(
 child: Container(
   width: 200,
   height: 200,
   color: Colors.green,
   child: const Center(child: Text('Exemplo de Submenu')),
 ),
 contextMenuBuilder: (context, offset) {
   return Card(
     child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
         SubmenuButton( // Botão que abre um submenu
           menuChildren: [ // Itens dentro do submenu
             MenuItemButton(
               child: const Text('Opção 1'),
               onPressed: () {
                 Navigator.pop(context);
               },
             ),
             MenuItemButton(
               child: const Text('Opção 2'),
               onPressed: () {
                 Navigator.pop(context);
               },
             ),
           ],
           child: const Text('Mais Opções'), // Texto do botão pai
         ),
       ],
     ),
   );
 },
)
 

Execução no HarmonyOS

Para rodar o projeto de exemplo context_menus em dispositivos HarmonyOS:

1. Clone o repositório: ```bash

   git clone https://github.com/flutter/samples.git cd samples/experimental/context_menus

2. Atualize o arquivo pubspec.yaml com a dependência adaptada para HarmonyOS, conforme mostrado na seção "Integração da Dependência".

3. Prepare o projeto para a plataforma HarmonyOS: ```bash

   flutter create . --platforms ohos

4. Execute o projeto: ```bash

   flutter run -d ohos

Funcionalidades Chave

• Criação de menus de contexto em qualquer parte da aplicação.
• Suporte a submenus hierárquicos.
• Customização de botões e da aparência dos menus.
• Adaptação de menus para diversos tipos de componentes.
• Compatibilidade com gestos de clique direito e toque prolongado.

Para mais informações sobre o desenvolvimento Flutter no HarmonyOS, explore a comunidade de código aberto do HarmonyOS:

Comunidade OpenHarmony Cross Platform