switch 表达式

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 20 课，共 30 课。

只用于选择值的 switch 可以写得更简短，称为 switch 表达式。它会返回一个值，你可以直接将它存储起来：

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

每一行都包含一个枚举值、一个箭头 => 和对应的结果，并以逗号结尾。这里没有 case，也没有赋值操作；整个 switch 以 ; 结尾，因为它是一条语句。

switch 表达式必须为每个值都提供答案。如果你向枚举中添加一个值，而某个 switch 没有对应的行，它就无法通过编译，并会报错指出缺少的 case。Dart 会显示每个需要更新的位置。

挑战

中等

为图库添加桌面布局：

在 enum ScreenType 中添加 desktop
当宽度大于或等于 1000 时，将 type 设为 ScreenType.desktop
将 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)),
            ),
        ],
      ),
    );
  }
}