Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Navigasi Halaman Asas

Pelajari cara menolak dan mengeluarkan laluan menggunakan Navigator, sekali gus membolehkan peralihan mudah antara skrin yang berbeza dalam aplikasi Flutter anda.

Pelajaran 1 daripada 411 langkah

Navigasi Halaman Asas ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Menavigasi Aplikasi Anda

Anggap aplikasi mudah alih sebagai koleksi halaman atau "skrin". Navigasi ialah cara pengguna berpindah antara skrin ini, seperti bergerak daripada senarai produk ke halaman butiran produk.

Aplikasi memerlukan cara yang jelas untuk bergerak ke hadapan.
Aplikasi juga memerlukan cara untuk kembali.
Flutter menyediakan alat yang berkuasa untuk tujuan ini.

Berkenalan dengan Navigator

Dalam Flutter, widget Navigator mengurus tindanan objek Route. Apabila anda mahu memaparkan skrin baharu, anda "menolak" route ke dalam tindanan ini. Apabila anda mahu kembali, anda "mengeluarkan" route daripada tindanan.

Ia seperti tindanan kad permainan.
Kad baharu diletakkan di atas (push).
Kad dikeluarkan dari atas (pop).

Memahami Route

Route ialah abstraksi untuk "skrin" atau "halaman" dalam aplikasi anda. Flutter menyediakan jenis route biasa yang dipanggil MaterialPageRoute, yang mencipta animasi peralihan khusus platform (seperti meluncur masuk dari kanan pada Android).

Ia merupakan pelan asas tentang rupa dan kelakuan skrin baharu apabila dipaparkan.

Bergerak ke Hadapan dengan push()

Untuk menavigasi ke skrin baharu, anda menggunakan Navigator.push(). Kaedah ini menerima BuildContext dan MaterialPageRoute sebagai argumen.

Fungsi builder di dalam MaterialPageRoute memberitahu Flutter widget yang perlu dibina untuk skrin baharu.

Cuba Menolak Route

Contoh ini menunjukkan cara menolak skrin baharu apabila butang ditekan. Jalankannya dan ketik butang tersebut!

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: const Center(
        child: Text('You are on the second screen!'),
      ),
    );
  }
}

Apakah itu BuildContext?

Anda mungkin perasan context dihantar dari satu tempat ke tempat lain. BuildContext ialah pemegang kepada lokasi widget dalam pepohon widget. Ia membantu widget mencari widget lain atau data yang berada lebih tinggi dalam pepohon.

Navigator menggunakan konteks ini untuk mengetahui tindanan navigasi yang perlu dikendalikannya.

Kembali dengan pop()

Apabila anda mahu kembali ke skrin sebelumnya, anda "mengeluarkan" route semasa daripada tindanan navigasi menggunakan Navigator.pop(). Tindakan ini akan mendedahkan skrin yang berada di bawahnya.

AppBar Flutter sering menyediakan butang kembali secara automatik apabila route baharu ditolak, yang secara dalaman memanggil Navigator.pop().

Cuba Mengeluarkan Route

Mari ubah suai contoh sebelumnya untuk menyertakan butang pada skrin kedua yang membolehkan kita kembali ke skrin utama secara jelas.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // This will go back!
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

Menggambarkan Tindanan

Bayangkan Navigator mengekalkan tindanan skrin. Apabila anda melakukan push, skrin baharu diletakkan di atas. Apabila anda melakukan pop, skrin paling atas dikeluarkan.

Pengguna sentiasa melihat skrin yang paling atas. Tingkah laku tindanan ini merupakan asas kepada cara navigasi berfungsi dalam Flutter.

Push: Menambah pada bahagian atas.
Pop: Mengeluarkan dari bahagian atas.
Skrin pertama berada di bahagian bawah.

Semakan Navigasi

Pertimbangkan aplikasi Flutter dengan dua skrin, ScreenA dan ScreenB. Jika anda sedang berada pada ScreenA dan mahu berpindah ke ScreenB, kemudian kembali ke ScreenA, apakah urutan kaedah Navigator yang akan anda gunakan?

Jawab dalam pelajaran interaktif

Imbas Kembali: Navigasi Asas

Syabas! Anda telah mempelajari konsep teras navigasi asas dalam Flutter:

Navigator mengurus tindanan route.
MaterialPageRoute mentakrifkan skrin baharu.
Navigator.push() menambahkan skrin baharu pada tindanan.
Navigator.pop() mengeluarkan skrin semasa daripada tindanan.
BuildContext penting untuk operasi navigasi.

Seterusnya, kita akan meneroka teknik navigasi yang lebih lanjutan seperti route bernama!

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Navigasi Halaman Asas” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Navigasi Halaman Asas”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Navigasi Halaman Asas”?

Pelajari cara menolak dan mengeluarkan laluan menggunakan Navigator, sekali gus membolehkan peralihan mudah antara skrin yang berbeza dalam aplikasi Flutter anda. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Navigasi Halaman Asas” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter