استخدام switch مع تعداد

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 19 من 30.

ينبغي أن تعرض المعرض صورتين في الصف على الهاتف وأربعًا على الجهاز اللوحي. يمكنك كتابة if وelse، لكن عندما تحتاج كل قيمة من قيم التعداد إلى إجابة خاصة بها، تكون قراءة switch أوضح:

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

ينظر Dart إلى type وينفذ الأسطر الموجودة تحت case المطابقة، وتلك الأسطر وحدها. ثم يواصل التنفيذ بعد القوس المعقوف الختامي.

ليس لـ columns قيمة عند التصريح عنه. وهذا مسموح لأن كل حالة تمنحه قيمة. يتحقق Dart من أن لكل قيمة من قيم التعداد حالةً: إذا أغفلت إحداها، فلن يُترجم الكود، وستظهر رسالة خطأ تسمّي القيمة المفقودة.

التحدي

سهل

تحتوي الشبكة دائمًا على عمودين. قبل 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)),
            ),
        ],
      ),
    );
  }
}