רשת של אריחים
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 10 מתוך 33.
גלריית תמונות או מסך הבית של אפליקציה מציגים פריטים זה לצד זה בשורות, ולא בעמודה ארוכה אחת. GridView.count מסדר את הילדים שלו ברשת גלילה כמו רשימה:
GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
],
)crossAxisCount מציין כמה אריחים יש בכל שורה. האריחים ממלאים את השורות משמאל לימין, ואז מתחילים שורה חדשה. כל אריח הוא ריבוע, והאריחים בשורה חולקים את הרוחב שלה.
mainAxisSpacing הוא המרווח בין השורות, ו-crossAxisSpacing הוא המרווח בין האריחים בשורה.
אתגר
קלששת הצבעים מסודרים זה מעל זה בתוך ListView, אחד בכל שורה. הציגו אותם במקום זאת ברשת עם שתי אריחים בכל שורה: GridView.count עם crossAxisCount: 2. השאירו מרווח של 8 פיקסלים בין האריחים.
נסו בעצמכם
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(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Colors')),
body: ListView(
padding: const EdgeInsets.all(8),
children: [
Container(
color: Colors.red,
alignment: Alignment.center,
child: const Text('Red'),
),
Container(
color: Colors.orange,
alignment: Alignment.center,
child: const Text('Orange'),
),
Container(
color: Colors.yellow,
alignment: Alignment.center,
child: const Text('Yellow'),
),
Container(
color: Colors.green,
alignment: Alignment.center,
child: const Text('Green'),
),
Container(
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Blue'),
),
Container(
color: Colors.purple,
alignment: Alignment.center,
child: const Text('Purple'),
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
תרגלו בעצמכם: קומפיילר Flutter אונליין