Biểu thức switch

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 20 trên 30.

Có thể viết gọn hơn một switch chỉ chọn một giá trị dưới dạng biểu thức switch. Biểu thức này trả về một giá trị để bạn lưu trực tiếp:

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

Mỗi dòng gồm một giá trị của enum, một mũi tên => và kết quả tương ứng, kết thúc bằng dấu phẩy. Không có case hay phép gán, và toàn bộ biểu thức switch kết thúc bằng ; vì đây là một câu lệnh.

Biểu thức switch phải có câu trả lời cho mọi giá trị. Nếu thêm một giá trị vào enum, mọi biểu thức switch không có dòng tương ứng sẽ không biên dịch được, đồng thời báo lỗi tại vị trí thiếu case. Dart sẽ cho bạn biết từng chỗ cần cập nhật.

Thử thách

Trung bình

Thêm bố cục máy tính để bàn vào thư viện ảnh:

thêm desktop vào enum ScreenType
đặt type thành ScreenType.desktop khi chiều rộng từ 1000 trở lên
thay câu lệnh switch bằng một biểu thức switch trả về 2, 4 và 6 cột

Tự làm thử

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