Corak BLoC dengan Strim
Pelajari corak BLoC (Komponen Logik Perniagaan) dalam Flutter untuk memisahkan logik perniagaan daripada UI menggunakan peristiwa, keadaan dan strim.
Corak BLoC dengan Strim ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 4 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.
Apakah BLoC?
BLoC ialah singkatan bagi Business Logic Component. Ia merupakan corak yang mengasingkan logik perniagaan daripada widget dengan menukarkan peristiwa kepada keadaan melalui strim.
- UI menghantar peristiwa masuk
- BLoC memprosesnya
- Keadaan baharu mengalir kembali kepada UI
Mengapakah Corak Lain?
Anda sudah mengetahui setState, Provider dan Riverpod. BLoC menyerlah apabila logik menjadi kompleks dan anda mahukan:
- Pemisahan UI dan logik yang jelas
- Peralihan keadaan yang boleh dijangka dan diuji
- Aliran berasaskan strim yang reaktif
Penyegaran Semula tentang Strim
Stream ialah jujukan nilai asinkronus dari semasa ke semasa. StreamController membolehkan anda menolak nilai dan mendedahkannya sebagai strim.
final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);Peristiwa
Peristiwa ialah kelas tidak berubah yang menerangkan sesuatu yang dilakukan oleh pengguna. Takrifkannya sebagai kelas Dart biasa.
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}Keadaan
Keadaan ialah gambaran tidak berubah tentang perkara yang patut dipaparkan oleh UI. Pastikan ia ringkas dan boleh disiri.
class CounterState {
final int count;
const CounterState(this.count);
}Kelas Bloc
Menggunakan pakej flutter_bloc, Bloc memetakan peristiwa kepada keadaan dengan pengendali on<Event>.
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(const CounterState(0)) {
on<Increment>((e, emit) => emit(CounterState(state.count + 1)));
on<Decrement>((e, emit) => emit(CounterState(state.count - 1)));
}
}Menyediakan Bloc
Balut sebahagian pepohon dalam BlocProvider supaya keturunan boleh mengakses bloc.
BlocProvider(
create: (_) => CounterBloc(),
child: const CounterPage(),
);Tindak balas dengan BlocBuilder
BlocBuilder membina semula widget setiap kali keadaan baharu dikeluarkan.
BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) => Text('Count: ' + state.count.toString()),
);Menghantar Peristiwa
Hantar peristiwa kepada bloc dengan context.read<CounterBloc>().add(...).
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Increment()),
child: const Icon(Icons.add),
);BlocListener untuk Kesan Sampingan
Gunakan BlocListener untuk kesan sampingan sekali sahaja seperti memaparkan SnackBar atau melakukan navigasi, apabila anda tidak mahu membina semula UI.
BlocListener<CounterBloc, CounterState>(
listener: (context, state) {
if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Reached 10!')),
);
},
child: child,
);Cubit: BLoC yang Lebih Ringkas
Cubit menghapuskan peristiwa dan mendedahkan kaedah secara terus yang memanggil emit. Gunakannya apabila kelas peristiwa penuh terasa terlalu berlebihan.
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
}Semakan Pantas
Widget manakah yang patut anda gunakan untuk mencetuskan SnackBar sekali sahaja tanpa membina semula UI bagi setiap keadaan?
Imbas Kembali
Anda telah mempelajari corak BLoC:
- Peristiwa masuk, keadaan keluar melalui strim
- Bloc dengan pengendali on<Event>, atau Cubit yang lebih ringkas
- BlocProvider, BlocBuilder dan BlocListener
BLoC memberikan pemisahan logik dan UI yang bersih serta mudah diuji untuk aplikasi yang kompleks.
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
Soalan Lazim
Adakah pelajaran “Corak BLoC dengan Strim” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Corak BLoC dengan Strim”, 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 “Corak BLoC dengan Strim”?
Pelajari corak BLoC (Komponen Logik Perniagaan) dalam Flutter untuk memisahkan logik perniagaan daripada UI menggunakan peristiwa, keadaan dan strim. 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 4 daripada 4.
Berapa lamakah pelajaran “Corak BLoC dengan Strim” 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
- setState dan InheritedWidget
- Asas Pakej Provider
- Riverpod untuk Keadaan
- Corak BLoC dengan Strim