switch על Enum

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 19 מתוך 30.

גלריה צריכה להציג 2 תמונות בשורה בטלפון ו־4 בטאבלט. אפשר לכתוב if ו־else, אבל כשכל ערך של enum צריך תשובה משלו, קריאה של switch ברורה יותר:

int columns;
switch (type) {
  case ScreenType.phone:
    columns = 2;
  case ScreenType.tablet:
    columns = 4;
}

Dart בודקת את type ומריצה רק את השורות שמתחת ל־case המתאים. אחר כך היא ממשיכה אחרי הסוגר המסולסל הסוגר.

ל־columns אין ערך כשהיא מוכרזת. זה מותר כי כל אחד מהמקרים נותן לה ערך. Dart בודקת שלכל ערך של ה־enum יש case: אם משמיטים אחד, הקוד לא מתקמפל ומופיעה שגיאה שמציינת את הערך החסר.

אתגר

קל

לרשת יש תמיד 2 עמודות. לפני return, הכריזו על int columns; והגדירו את הערך שלו באמצעות switch על type: 2 בטלפון, 4 בטאבלט. לאחר מכן השתמשו ב-columns בתור crossAxisCount של הרשת.

נסו בעצמכם

import 'package:flutter/material.dart';

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

enum ScreenType { phone, tablet }

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

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

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

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    var type = ScreenType.phone;
    if (width >= 600) {
      type = ScreenType.tablet;
    }
    final photos = ['Beach', 'Forest', 'City', 'Desert', 'Lake', 'Snow', 'Island', 'Canyon'];
    return Scaffold(
      appBar: AppBar(title: Text('Gallery: ${type.name}')),
      body: GridView.count(
        crossAxisCount: 2,
        children: [
          for (final photo in photos)
            Container(
              margin: const EdgeInsets.all(4),
              color: Colors.cyan.shade100,
              child: Center(child: Text(photo)),
            ),
        ],
      ),
    );
  }
}