Menguruskan Keadaan dan Navigasi dengan Navigator dalam Flutter

Dalam Flutter, Navigator ialah alat yang berkuasa untuk mengurus keadaan terpusat dan navigasi halaman dalam apl anda. Ia membolehkan anda membina aplikasi dengan seni bina yang jelas dan navigasi mudah antara skrin.

Menentukan Routes

Untuk mula menggunakan Navigator, anda perlu menentukan routes dalam apl anda. Routes ialah skrin individu yang boleh dinavigasi pengguna. Anda boleh menentukan routes menggunakan MaterialApp dan menyediakan koleksi routes, di mana setiap satunya route dipetakan ke Widget.

Contoh:

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

Dalam contoh di atas, kami telah mentakrifkan dua routes: '/'(home page) dan '/second'(second page). Anda boleh menambah seberapa banyak routes yang diperlukan.

Menavigasi Antara Halaman

Untuk menavigasi antara halaman, anda boleh menggunakan Navigator kaedah 's. Satu kaedah biasa ialah pushNamed, yang membolehkan anda menavigasi ke halaman lain dengan memberikan nama itu route.

Contoh:

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

Selain itu, anda boleh menggunakan kaedah tolak untuk menavigasi ke yang lain route dan bertukar antara halaman.

Melewati Data Antara Halaman

Anda boleh menghantar data antara halaman dengan menggunakan kaedah pushNamed dengan parameter argumen.

Contoh:

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

Kemudian, anda boleh mengakses data dari halaman kedua menggunakan ModalRoute.of dan objek tetapan:

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

Kembali ke Halaman Sebelumnya

Untuk kembali ke halaman sebelumnya, anda boleh menggunakan kaedah pop Navigator. Ini akan menutup halaman semasa dan kembali ke halaman sebelumnya dalam timbunan.

Contoh:

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

 

Kesimpulan

Navigator dalam Flutter membolehkan anda mengurus keadaan terpusat dan menavigasi antara halaman dengan mudah. Dengan menggunakan Navigator, anda boleh membina apl dengan seni bina yang jelas dan memberikan pengalaman pengguna yang lebih baik apabila menavigasi antara skrin.