Instrukcja switch z typem wyliczeniowym

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

Galeria powinna wyświetlać 2 zdjęcia w rzędzie na telefonie i 4 na tablecie. Możesz użyć if i else, ale gdy każda wartość typu wyliczeniowego wymaga osobnej odpowiedzi, instrukcja switch jest czytelniejsza:

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

Dart sprawdza wartość type i wykonuje tylko wiersze znajdujące się pod pasującym case. Następnie kontynuuje działanie za zamykającą klamrą.

Zmienna columns nie ma wartości w chwili deklaracji. Jest to dozwolone, ponieważ każdy przypadek przypisuje jej wartość. Dart sprawdza, czy każda wartość typu wyliczeniowego ma swój przypadek: jeśli pominiesz jedną z nich, kod się nie skompiluje, a błąd wskaże brakującą wartość.

Wyzwanie

Łatwy

Siatka ma zawsze 2 kolumny. Przed return zadeklaruj int columns; i ustaw jego wartość za pomocą instrukcji switch dla type: 2 dla telefonu, 4 dla tabletu. Następnie użyj columns jako wartości crossAxisCount siatki.

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