const 组件

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 15 课，共 34 课。

放在一个值前面的 const 表示：你编写代码时，这个值就是固定的，并且永远不会改变。只要应用在运行，const Text('Score') 就会显示 Score。

为什么要告诉 Dart 这一点？当 setState 再次构建屏幕时，Flutter 可以跳过所有 const 组件，因为它知道其中的内容没有改变。这就是为什么 VS Code 和 Android Studio 等 Flutter 代码编辑器会在可以设为 const 的组件下方加上波浪线，并建议添加 const。从现在开始，本课程中的应用会在适合的地方使用 const。

const 会向内部生效：对于组件，它括号中的所有内容也都是 const。因此，你只需在最外层不会改变的组件上写一次：

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

变量可能会改变，所以不能放在 const 中。把 Text('$_score') 放进该列中，Dart 就会拒绝编译，并报错 "Not a constant expression"。解决方法是：从列上移除 const，并将它加到每个不会改变的子组件上：

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

挑战

中等

按下加号按钮后，分数会增加，但屏幕上始终看不到它。在 Score 下方，添加字号为 48 的 Text('$_score')。你需要把 const 从 Column 移到其中不会变化的小部件上。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _score = 0;

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}