Staat en navigatie beheren met Navigator in Flutter

In Flutter Navigator is dit een krachtige tool voor het beheren van gecentraliseerde status- en paginanavigatie in uw app. Hiermee kunt u apps bouwen met een duidelijke architectuur en eenvoudige navigatie tussen schermen.

definiëren Routes

Om te beginnen met gebruiken Navigator, moet u definiëren routes in uw app. Routes zijn individuele schermen waar gebruikers naartoe kunnen navigeren. U kunt routes MaterialApp definiëren en een verzameling leveren van routes, waarbij elk route is toegewezen aan een Widget.

Voorbeeld:

MaterialApp(  
  initialRoute: '/',  
  routes: {  
    '/':(context) => HomePage(),  
    '/second':(context) => SecondPage(),  
  },  
)  

In het bovenstaande voorbeeld hebben we er twee gedefinieerd routes: '/'(home page) en '/second'(second page). U kunt er zoveel toevoegen routes als nodig is.

Navigeren tussen pagina's

Om tussen pagina's te navigeren, kunt u Navigator 's-methoden gebruiken. Een veelgebruikte methode is pushNamed, waarmee u naar een andere pagina kunt navigeren door de naam van die pagina op te geven route.

Voorbeeld:

// Navigate to the second page
Navigator.pushNamed(context, '/second');

Bovendien kunt u de push-methode gebruiken om naar een andere te navigeren route en tussen pagina's te schakelen.

Gegevens doorgeven tussen pagina's

U kunt gegevens doorgeven tussen pagina's door de pushNamed-methode te gebruiken met de arguments-parameter.

Voorbeeld:

Navigator.pushNamed(  
  context,  
  '/second',  
  arguments: 'Data from the home page',  
);  

Vervolgens hebt u toegang tot de gegevens van de tweede pagina met behulp van de ModalRoute.of en instellingenobjecten:

class SecondPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    String data = ModalRoute.of(context).settings.arguments;  
    // Use the data here  
  }  
}  

Teruggaan naar de vorige pagina

Om terug te gaan naar de vorige pagina, kunt u de pop-methode van gebruiken Navigator. Hierdoor wordt de huidige pagina gesloten en keert u terug naar de vorige pagina in de stapel.

Voorbeeld:

// Go back to the previous page
Navigator.pop(context);

 

Conclusie

Navigator in Flutter kunt u de gecentraliseerde status beheren en gemakkelijk tussen pagina's navigeren. Door te gebruiken Navigator, kunt u apps bouwen met een duidelijke architectuur en een betere gebruikerservaring bieden bij het navigeren tussen schermen.