Wyrażenia switch

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 20 z 30.

Instrukcję switch, która tylko wybiera wartość, można zapisać krócej jako wyrażenie switch. Zwraca ono wartość, którą bezpośrednio przypisujesz:

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

Każdy wiersz zawiera wartość wyliczenia, strzałkę => i odpowiadający jej wynik, a na końcu przecinek. Nie ma tu case ani przypisania, a całe wyrażenie switch kończy się znakiem ;, ponieważ jest pojedynczą instrukcją.

Wyrażenie switch musi zawierać odpowiedź dla każdej wartości. Dodaj wartość do wyliczenia, a każda instrukcja switch, która jej nie uwzględnia, przestanie się kompilować i pojawi się błąd wskazujący brakujący przypadek. Dart pokaże Ci każde miejsce, które wymaga aktualizacji.

Wyzwanie

Średni

Dodaj układ dla komputerów stacjonarnych do galerii:

dodaj desktop do enum ScreenType
ustaw type na ScreenType.desktop, gdy szerokość wynosi 1000 lub więcej
zastąp instrukcję switch wyrażeniem switch, które ustawia 2, 4 lub 6 kolumn

Spróbuj swoich sił

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)),
            ),
        ],
      ),
    );
  }
}