تعبيرات switch

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

يمكن كتابة جملة switch التي تختار قيمة فقط بشكل أقصر، على هيئة تعبير switch. فهي تُعيد قيمة تخزّنها مباشرةً:

final columns = switch (type) {
  ScreenType.phone => 2,
  ScreenType.tablet => 4,
};

كل سطر هو قيمة من التعداد، يتبعها سهم => والنتيجة المقابلة لها، وينتهي بفاصلة. لا يوجد case ولا إسناد، وينتهي تعبير switch بأكمله بـ ; لأنه عبارة واحدة.

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

التحدي

متوسط

أضف تخطيطًا لسطح المكتب إلى المعرض:

أضف desktop إلى enum ScreenType
عيّن type إلى ScreenType.desktop عندما يكون العرض 1000 أو أكثر
استبدل عبارة switch بتعبير switch يُظهر 2 و4 و6 أعمدة

جرّب بنفسك

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;
    }
    int columns;
    switch (type) {
      case ScreenType.phone:
        columns = 2;
      case ScreenType.tablet:
        columns = 4;
    }
    final photos = ['Beach', 'Forest', 'City', 'Desert', 'Lake', 'Snow', 'Island', 'Canyon'];
    return Scaffold(
      appBar: AppBar(title: Text('Gallery: ${type.name}')),
      body: GridView.count(
        crossAxisCount: columns,
        children: [
          for (final photo in photos)
            Container(
              margin: const EdgeInsets.all(4),
              color: Colors.cyan.shade100,
              child: Center(child: Text(photo)),
            ),
        ],
      ),
    );
  }
}