1 00:00:02,940 --> 00:00:09,450 Então, vamos adicionar esse último padrão de navegação principal que você vê nos aplicativos para dispositivos móveis, e é claro que há uma porta lateral 2 00:00:10,170 --> 00:00:16,000 que oferece riscos à navegação, como coberto pelo papai, e a partir da navegação de reação, você pode importar o create draw 3 00:00:16,000 --> 00:00:18,740 e o Navigator, que fazem exatamente o que parece. 4 00:00:18,750 --> 00:00:24,690 Isso facilita a criação desse padrão de navegação baseado em sorteio e fornece um sorteio 5 00:00:24,750 --> 00:00:30,870 e toda a funcionalidade necessária para controlar a palha da caixa, o que é obviamente muito conveniente. 6 00:00:30,930 --> 00:00:35,060 Então, simplesmente criamos um novo navegador e farei isso na parte inferior deste arquivo. 7 00:00:35,490 --> 00:00:40,860 E apenas uma observação rápida, é claro, você pode dividir isso em vários arquivos e ter 8 00:00:40,890 --> 00:00:46,550 cada navegador em seu próprio arquivo e, em seguida, fundi-los em um arquivo, importando-os para um arquivo central. 9 00:00:46,560 --> 00:00:48,120 Isso é algo que você poderia fazer. 10 00:00:48,120 --> 00:00:51,430 Achei mais fácil para este tutorial também manter tudo em um arquivo. 11 00:00:51,560 --> 00:00:56,070 Um arquivo muito grande demais, mas você definitivamente pode dividir isso. 12 00:00:56,340 --> 00:01:01,410 Então, criarei meu navegador de desenho aqui na parte inferior deste arquivo e todos armazenados nessa constante chamada 13 00:01:01,770 --> 00:01:04,380 Navegador principal, porque no final é isso que é. 14 00:01:04,380 --> 00:01:10,470 Este será o nosso navegador principal no final, porque a guia estará dentro do sorteio e o navegador no 15 00:01:10,470 --> 00:01:11,880 final, nossos haps aqui. 16 00:01:11,970 --> 00:01:13,190 Então, nas duas guias. 17 00:01:13,200 --> 00:01:19,530 Temos acesso a esse sorteio lateral e decidimos que o sorteio nos permite ir para uma nova tela que não fará 18 00:01:19,530 --> 00:01:20,880 parte de nossas torneiras. 19 00:01:20,910 --> 00:01:25,890 Portanto, o navegador de desenho está acima do navegador de guias na hierarquia. 20 00:01:26,130 --> 00:01:28,680 Então, como configuramos esse navegador de desenho? 21 00:01:28,830 --> 00:01:32,070 Basicamente, como fizemos antes, são necessários dois argumentos. 22 00:01:32,070 --> 00:01:37,950 O primeiro argumento é um objeto em que configuramos as telas para a justiça do navegador 23 00:01:37,950 --> 00:01:46,350 destruidor antes de termos identificadores como torneiras ou favoritos para refeições, qualquer que seja o navegador adequado para a primeira entrada da gaveta que 24 00:01:46,350 --> 00:01:47,570 você deseja ter. 25 00:01:47,850 --> 00:01:54,780 E aqui eu quero apontar para as minhas refeições no navegador da guia pai ainda porque é isso que eu quero 26 00:01:54,780 --> 00:02:02,460 carregar lá e em uma segunda entrada é a tela de filtros, não devemos esquecer que temos outra tela, a tela de filtros 27 00:02:02,460 --> 00:02:08,550 que não usamos antes de agora, pois é hora de brilhar e, na verdade, tudo envolto em um 28 00:02:08,550 --> 00:02:11,130 navegador de pilha, mesmo que esteja vazio. 29 00:02:11,130 --> 00:02:13,850 Também conseguimos um cabeçalho lá. 30 00:02:14,130 --> 00:02:20,370 Então, adicionarei outro navegador de pilha aqui com criar navegador de pilha. 31 00:02:20,370 --> 00:02:22,130 Essa é uma pilha muito simples. 32 00:02:22,290 --> 00:02:26,670 Ele terá apenas uma tela e essa será a tela de filtros que, portanto, precisaria importar aqui 33 00:02:26,670 --> 00:02:29,190 na parte superior, porque ainda não estamos fazendo isso. 34 00:02:29,340 --> 00:02:38,670 Vamos importar a tela de filtros aqui da tela de filtros de telas e agora podemos usar a tela de filtros no site 35 00:02:38,720 --> 00:02:47,600 deles, não aqui, mas aqui no navegador de pilha e nomeado é navigator de filtros, lê algo assim e agora é esse 36 00:02:47,600 --> 00:02:54,450 navegador de filtros que pode mapear para filtros em meu navegador de gaveta e eu só uso 37 00:02:54,450 --> 00:02:59,790 um navegador de pilha aqui, então eles também têm um cabeçalho lá 38 00:02:59,790 --> 00:03:04,260 e, por nenhuma outra razão, agora na tela do filtro, 39 00:03:04,260 --> 00:03:12,810 é claro, trabalhará nisso em um segundo, mas lá existe uma coisa que eu quero fazer imediatamente. adicionarei minhas opções de 40 00:03:15,280 --> 00:03:24,840 navegação e adicionarei um título de cabeçalho e defino-o para filtrar ou filtrar refeições assim, de volta ao navegador de refeições que estamos criando 41 00:03:24,840 --> 00:03:31,050 nessa pilha, estamos atribuindo o navegador de filtros navigator stack ao nosso navegador de desenho 42 00:03:31,050 --> 00:03:40,270 e agora só precisamos usar o navegador principal aqui no contêiner de aplicativos para começar com dívidas e agora, se salvarmos isso, não 43 00:03:40,270 --> 00:03:41,350 vemos nada. 44 00:03:41,350 --> 00:03:47,380 Bem, eu disse que o navegador de desenho gerenciaria toda a lógica para abri-la, e 45 00:03:47,380 --> 00:03:56,020 o que não faz automaticamente para nós é mostrar um ícone de menu para que não mostre um botão de hambúrguer para nós. 46 00:03:56,020 --> 00:03:59,710 É algo que precisamos fazer e podemos decidir em quais telas mostrar. 47 00:03:59,710 --> 00:04:04,600 E, claro, essa seria a tela de categoria, porque é a tela raiz da guia de 48 00:04:04,600 --> 00:04:09,320 refeições e a tela favorita, porque é a tela raiz da guia de favoritos. 49 00:04:09,340 --> 00:04:15,880 Então, nessas duas telas, quero adicionar esse ícone de menu e em minhas opções de navegação, como você 50 00:04:15,910 --> 00:04:20,390 aprendeu, porque lá quero adicioná-lo com a ajuda do cabeçalho à esquerda. 51 00:04:20,410 --> 00:04:26,620 Anteriormente, tínhamos o direito de adicionar ações à barra de navegação no cabeçalho, mas esse botão de menu normalmente 52 00:04:26,620 --> 00:04:29,070 fica à esquerda para ser adicionado aqui. 53 00:04:29,350 --> 00:04:32,810 E vou usar meus botões de cabeçalho para isso. 54 00:04:32,920 --> 00:04:37,480 Portanto, importaremos dos botões de cabeçalho de navegação de reação. 55 00:04:37,480 --> 00:04:44,970 Neste pacote que usamos anteriormente, importarei botões de cabeçalho e também detalharei o que todos usamos antes e também 56 00:04:47,490 --> 00:04:50,280 importarei meu botão de cabeçalho personalizado. 57 00:04:50,280 --> 00:04:57,660 Então, botão de cabeçalho do botão de cabeçalho de componentes, para que o mesmo padrão que usamos anteriormente para adicionar essa estrela eu 58 00:04:57,690 --> 00:04:59,730 possa de fato barra de ação. 59 00:04:59,730 --> 00:05:06,330 Agora, farei isso aqui para o ícone de menu do botão de menu e, portanto, agora podemos 60 00:05:06,360 --> 00:05:18,000 descer para a esquerda e seus botões de cabeçalho de anúncio este ano como um componente para definir o componente do botão de cabeçalho como nosso componente do botão de 61 00:05:18,000 --> 00:05:18,500 cabeçalho. 62 00:05:18,510 --> 00:05:23,610 Estamos importando de nosso próprio componente personalizado e adicionamos um item que nos permite definir o 63 00:05:23,610 --> 00:05:28,420 título que deve ser menu e, em seguida, é muito importante que eu possa citar. 64 00:05:28,560 --> 00:05:31,560 E aí você pode usar o menu IOW. 65 00:05:31,560 --> 00:05:36,570 E, a propósito, você sempre pode usar a API da plataforma aqui para usar um ícone diferente 66 00:05:36,570 --> 00:05:38,640 para Android e ISIS, se desejar. 67 00:05:38,640 --> 00:05:44,910 E por último, mas não menos importante, todo o add on press para fazer alguma coisa quando os botões mortos são pressionados. 68 00:05:44,910 --> 00:05:52,200 E agora isso deve renderizar um botão de menu bonito aqui na tela e, de fato, o vemos aqui 69 00:05:52,830 --> 00:05:53,600 em nós. 70 00:05:53,640 --> 00:05:55,730 E também vemos no Android. 71 00:05:55,740 --> 00:06:00,040 Agora, novamente, se você quiser um ícone diferente no Android que se pareça mais com um ícone típico do Android. 72 00:06:00,090 --> 00:06:05,550 O mesmo vale para os toques pela maneira como você pode usar a API da plataforma para renderizar um 73 00:06:06,350 --> 00:06:09,680 ícone diferente para economizar algum tempo. Vou usar os mesmos ícones. 74 00:06:09,720 --> 00:06:11,910 Então é assim que exibimos o ícone. 75 00:06:11,910 --> 00:06:18,360 Como agora abrimos um empate, porém, para isso, precisamos acessar o suporte de navegação e não temos 76 00:06:18,360 --> 00:06:21,420 esse acesso nas opções de navegação como esta. 77 00:06:21,420 --> 00:06:27,330 Mas é claro que aprendemos anteriormente que você pode usar o formulário de função aqui, onde você obtém seus dados de 78 00:06:27,330 --> 00:06:27,680 navegação. 79 00:06:27,690 --> 00:06:33,180 Você poderia dizer que nessa função você precisa retornar seu objeto de configuração. 80 00:06:33,180 --> 00:06:36,720 Então aqui você tem que retornar um objeto no final. 81 00:06:36,930 --> 00:06:40,170 E agora os dados de navegação têm esse suporte de navegação. 82 00:06:40,170 --> 00:06:46,380 Então agora, aqui na imprensa, podemos dizer que navegação por pontos de dados de navegação Papai estará disponível, 83 00:06:46,380 --> 00:06:50,350 fornecida pela navegação de reação, que executa esta função no final. 84 00:06:50,550 --> 00:06:54,030 E aí você terá um método de alternância de desenho. 85 00:06:54,030 --> 00:06:59,850 Você também teria o draw aberto se souber que deseja abri-lo, mas alternar o draw o abrirá se estiver fechado 86 00:06:59,850 --> 00:07:01,890 e o fechará se estiver aberto. 87 00:07:01,890 --> 00:07:06,440 Então, aqui você tem que alternar entre desenhar e traçar deve abrir o menu lateral. 88 00:07:06,440 --> 00:07:12,570 Portanto, se salvarmos isso agora, de fato a gaveta se abre, podemos trabalhar no estilo e no 89 00:07:12,570 --> 00:07:20,890 texto que vemos aqui em um segundo, mas é assim que você pode abrir essa gaveta agora antes de cuidarmos de como isso fica aqui. 90 00:07:20,930 --> 00:07:22,690 Vamos ter certeza de dizer um favorito. 91 00:07:22,700 --> 00:07:27,050 E é claro que todos podem depositar um vídeo e fazê-lo por conta própria aqui, porque as 92 00:07:27,050 --> 00:07:29,570 etapas serão as mesmas das categorias de refeições aqui. 93 00:07:29,570 --> 00:07:34,430 É uma boa prática a oferecer, mas após essa breve pausa, você precisa passar neste vídeo, faremos 94 00:07:36,210 --> 00:07:38,520 isso juntos, para que você tenha sucesso. 95 00:07:38,520 --> 00:07:46,400 Vamos fazer isso juntos e, no final, tudo se resume a copiar essa configuração aqui na tela de favoritos 2D, para copiar toda essa 96 00:07:47,060 --> 00:07:53,210 configuração de opções de navegação da tela de categorias para a tela favorita e substituir minha opção de 97 00:07:53,660 --> 00:07:58,760 navegação por ela, é claro, isso significa que eu tem que nos renomear aqui 98 00:07:58,760 --> 00:08:05,450 para tela favorita e aqui mudar o título de volta para seus favoritos, mas agora eu já tenho essa função 99 00:08:05,450 --> 00:08:12,130 de criação de opções de navegação dinâmica aqui, onde tenho que alternar para chamar o ícone aqui quando ele usa 100 00:08:12,170 --> 00:08:17,720 o mesmo, basta fazer Certifique-se de importar todas as coisas que precisamos importar e, para o 101 00:08:17,720 --> 00:08:25,100 pai, podemos pegar as importações aqui na tela de categorias e também no pacote de navegação ou botões de navegação de reação. 102 00:08:25,100 --> 00:08:27,020 E do nosso próprio botão de cabeçalho. 103 00:08:27,020 --> 00:08:34,920 Pegue isso e adicione aqui na tela favorita agora com o papai, se salvarmos, pois isso deve estar agora na tela favorita, 104 00:08:34,930 --> 00:08:41,100 também temos que desenhar e você pode abri-la lá também, não podemos simplesmente abri-la por meio de 105 00:08:41,120 --> 00:08:46,180 um clique função de filtro para levar para a tela de filtro, agora não 106 00:08:46,180 --> 00:08:52,160 temos um caminho de volta, mas isso é algo que todos nós podemos consertar imediatamente por 107 00:08:52,220 --> 00:09:02,560 causa da tela de filtro. Simplesmente também quero desenhar na parte superior, por isso tela de filtro Também adicionarei minhas importações aqui Os botões do cabeçalho do chicote terminam 108 00:09:02,680 --> 00:09:07,280 e, em seguida, todas as opções de adição por navegação aqui. 109 00:09:07,570 --> 00:09:13,780 Portanto, copie as opções de navegação da tela favorita nesta função dinâmica e adicione-a à tela de 110 00:09:13,840 --> 00:09:19,900 filtros e substitua a escada de opções de navegação, é claro. Assim, este ano foi alterado novamente 111 00:09:19,960 --> 00:09:27,730 para a tela de filtros e alterado para o título novamente para filtrar refeições ou o que você quiser aqui e com 112 00:09:27,940 --> 00:09:34,600 isso, deveríamos ter um empate na tela do filtro e isso nos permite voltar às refeições agora, mas faltam 113 00:09:34,600 --> 00:09:35,580 algumas coisas. 114 00:09:35,620 --> 00:09:40,870 Por exemplo, na tela do filtro, o cabeçalho parece totalmente diferente e, portanto, aqui no 115 00:09:40,870 --> 00:09:46,930 Android, eu nem consigo ver meu botão, porque é branco, o texto aqui não é o texto que 116 00:09:46,930 --> 00:09:55,570 eu quero exibir. Também quero usar cores diferentes aqui, talvez uma fonte diferente, então ainda há trabalho a ser feito, mas a funcionalidade básica de desenho 117 00:09:55,720 --> 00:09:59,820 foi adicionada e, como você vê novamente com muito pouco esforço. 118 00:09:59,890 --> 00:10:03,550 Então, agora vamos cuidar do estilo do desenho e da tela de filtros.