向页面传递数据

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 21 课，共 33 课。

详情屏幕会显示一个项目，也就是你点击的项目。屏幕是一个小部件，因此它和其他小部件一样，通过构造函数获取数据。

class PlanetScreen extends StatelessWidget {
  const PlanetScreen({super.key, required this.planet});

  final Planet planet;
  ...
}

屏幕会将行星保存在一个 final 字段中，并在 build 中读取它：Text(planet.name)。super.key 是每个小部件都可以接收的键；把它放在最前面。

推入屏幕时，传入被点击行对应的行星：

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => PlanetScreen(planet: planet)),
  );
},

现在，一个屏幕类就能显示任意行星。由列表决定显示哪一个。

挑战

中等

点击任意行星：屏幕总是显示 Mercury。修改 PlanetScreen，让它显示你点击的行星：

为它添加一个 final Planet planet; 字段和一个 required this.planet 参数
在它的应用栏中显示 planet.name，并在屏幕中央显示 Mars has 2 moons（其中包含行星名称和卫星数量）
推送页面时传入点击的 planet

亲手试试

import 'package:flutter/material.dart';

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

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

  final List<Planet> planets = const [
    Planet(name: 'Mercury', moons: 0),
    Planet(name: 'Venus', moons: 0),
    Planet(name: 'Earth', moons: 1),
    Planet(name: 'Mars', moons: 2),
    Planet(name: 'Jupiter', moons: 95),
    Planet(name: 'Saturn', moons: 146),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Planets')),
      body: ListView(
        children: [
          for (Planet planet in planets)
            ListTile(
              title: Text(planet.name),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const PlanetScreen()),
                );
              },
            ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mercury')),
      body: const Center(
        child: Text('Mercury has 0 moons'),
      ),
    );
  }
}

class Planet {
  final String name;
  final int moons;

  const Planet({required this.name, required this.moons});
}