Widget Reka Letak Asas
Kuasai widget reka letak penting seperti Row, Column, Container dan Stack untuk mencipta antara muka pengguna yang tersusun serta responsif.
Widget Reka Letak Asas ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 2 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.
Sebab Susun Atur Penting
Dalam Flutter, semuanya ialah widget! Untuk membina antara muka pengguna yang kompleks dan menarik, anda perlu menyusun widget ini pada skrin.
Widget susun atur ialah widget khas yang direka untuk membantu anda menyusun widget lain, dengan menentukan saiz, kedudukan dan cara widget tersebut berinteraksi antara satu sama lain.
Kenali Container
Widget Container ialah salah satu widget susun atur yang paling serba guna. Anggaplah ia sebagai kotak yang boleh disesuaikan untuk memuatkan satu widget anak.
Anda boleh menggunakannya untuk:
- Menambahkan ruang dalam atau jidar
- Menetapkan warna latar belakang atau hiasan
- Menentukan lebar dan tinggi tertentu
- Mengubah kedudukan atau putarannya
Kotak Berwarna Ringkas
Mari cipta Container asas dengan widget anak Text. Perhatikan cara kami menetapkan color dan paddingnya.
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: Scaffold(
appBar: AppBar(title: const Text('Container Demo')),
body: Center(
child: Container(
padding: const EdgeInsets.all(20.0),
color: Colors.blueAccent,
child: const Text(
'Hello from Container!',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}Susunan Mendatar dengan Baris
Apabila anda perlu menyusun beberapa widget bersebelahan secara mendatar, widget Row ialah pilihan utama anda. Widget ini menerima senarai widget sebagai children.
Row secara automatik cuba memuatkan widget anaknya di sepanjang paksi mendatar, dan anda boleh mengawal penjajarannya dalam baris tersebut.
Baris Butang
Beginilah cara anda meletakkan tiga butang bersebelahan menggunakan Row. Kami akan menambahkan sedikit jarak antara butang-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: Scaffold(
appBar: AppBar(title: const Text('Row Demo')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
],
),
),
),
);
}
}Susunan Menegak dengan Lajur
Sama seperti Row menyusun widget secara mendatar, widget Column menyusunnya secara menegak, satu di bawah yang lain.
Widget ini juga menerima senarai children dan membolehkan anda mengawal penjajaran menegaknya.
Medan Teks Bertindan
Mari cipta borang ringkas seperti borang log masuk menggunakan Column untuk menyusun dua TextField dan satu butang secara menegak.
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: Scaffold(
appBar: AppBar(title: const Text('Column Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: 'Username'),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
ElevatedButton(onPressed: () {}, child: const Text('Login')),
],
),
),
),
);
}
}Menjajarkan Widget Anak
Row dan Column kedua-duanya menggunakan dua sifat penting untuk penjajaran:
mainAxisAlignment: Cara widget anak diletakkan di sepanjang paksi utama (mendatar untukRow, menegak untukColumn). Contoh:start,center,end,spaceAround.crossAxisAlignment: Cara widget anak diletakkan di sepanjang paksi berserenjang (menegak untukRow, mendatar untukColumn). Contoh:start,center,end,stretch.
Dengan sifat-sifat ini, anda boleh mengawal reka letak dengan lebih terperinci!
Bertindih dengan Tindan
Adakalanya anda perlu meletakkan widget di atas satu sama lain, seperti teks di atas imej. Di sinilah widget Stack berguna.
Stack membolehkan anda melapiskan beberapa widget anak. Anda boleh mengawal kedudukan tepatnya dalam tindan menggunakan widget Positioned.
Imej dengan Lapisan Teks
Mari letakkan teks terus di atas imej menggunakan Stack. Kami akan menggunakan Positioned untuk meletakkan teks dengan tepat.
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: Scaffold(
appBar: AppBar(title: const Text('Stack Demo')),
body: Center(
child: SizedBox(
width: 300,
height: 200,
child: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/300/200',
fit: BoxFit.cover,
),
const Positioned(
bottom: 10,
left: 10,
child: Text(
'Beautiful Scenery',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
shadows: [
Shadow(blurRadius: 5, color: Colors.black)
],
),
),
),
],
),
),
),
),
);
}
}Cabaran Reka Letak
Antara widget berikut, yang manakah digunakan terutamanya untuk menyusun beberapa widget anak dalam satu arah (sama ada secara mendatar atau menegak)?
Reka Letak Dikuasai!
Syabas! Kini anda telah menguasai widget reka letak asas dalam Flutter:
Container: Kotak serba guna untuk satu widget anak, yang menawarkan kawalan terhadap ruang dalam, jidar, warna dan saiz.Row: Menyusun beberapa widget anak secara mendatar.Column: Menyusun beberapa widget anak secara menegak.Stack: Melapiskan widget anak di atas satu sama lain, biasanya bersamaPositioned.
Memahami widget ini penting untuk membina mana-mana UI Flutter!
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 “Widget Reka Letak Asas” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Widget Reka Letak 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 “Widget Reka Letak Asas”?
Kuasai widget reka letak penting seperti Row, Column, Container dan Stack untuk mencipta antara muka pengguna yang tersusun serta responsif. 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 2 daripada 4.
Berapa lamakah pelajaran “Widget Reka Letak 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
- Widget Tanpa Keadaan berbanding Berkeadaan
- Widget Reka Letak Asas
- Elemen UI Interaktif
- Membina Senarai Boleh Tatal dengan ListView