Menu
CoddyTech

רשת של אריחים

חלק מהיחידה רשימות ומסכים במסלול ה-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 הוא המרווח בין האריחים בשורה.

challenge icon

אתגר

קל

ששת הצבעים מסודרים זה מעל זה בתוך 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'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה רשימות ומסכים

תרגלו בעצמכם: קומפיילר Flutter אונליין