Gửi dữ liệu đến màn hình

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 21 trên 33.

Màn hình chi tiết hiển thị một mục, mục bạn đã nhấn. Màn hình là một widget, nên nó nhận dữ liệu giống như mọi widget khác: thông qua hàm khởi tạo.

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

  final Planet planet;
  ...
}

Màn hình lưu hành tinh trong một trường final và đọc trường đó trong build: Text(planet.name). super.key là khóa mà mọi widget đều có thể nhận; hãy giữ nó ở vị trí đầu tiên.

Ở nơi bạn mở màn hình, hãy truyền vào hành tinh của hàng đã được nhấn:

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

Giờ đây, một lớp màn hình có thể hiển thị bất kỳ hành tinh nào. Danh sách quyết định hành tinh nào sẽ được hiển thị.

Thử thách

Trung bình

Chạm vào hành tinh bất kỳ: màn hình luôn hiển thị Mercury. Hãy sửa PlanetScreen để màn hình hiển thị hành tinh bạn đã chạm:

thêm trường final Planet planet; và tham số required this.planet
hiển thị planet.name trên thanh ứng dụng và Mars has 2 moons ở giữa màn hình, trong đó có tên hành tinh và số mặt trăng
truyền planet đã chạm khi bạn điều hướng đến màn hình đó

Tự làm thử

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