Phương thức trong lớp của bạn

Thuộc phần Quản lý trạng thái trong hành trình Flutter của Coddy. Bài học 5 trên 27.

Cho đến nay, các lớp của bạn chứa dữ liệu: tên, giá tiền. Lớp cũng có thể chứa code để thay đổi dữ liệu đó. Một hàm bên trong lớp được gọi là phương thức:

class Wallet {
  int coins = 10;

  void earn(int amount) {
    coins = coins + amount;
  }
}

Gọi phương thức bằng dấu chấm, giống như với thuộc tính: wallet.earn(3). Bên trong phương thức, coins là thuộc tính của ví mà bạn gọi phương thức trên đó.

Tại sao phải làm vậy khi trang có thể tự viết wallet.coins = wallet.coins + 3? Vì khi đó, các quy tắc chỉ nằm ở một nơi. Nếu ví không bao giờ được phép có số xu nhỏ hơn 0, phương thức spend sẽ kiểm tra điều đó, và mọi nút dùng để chi tiêu đều gọi qua bước kiểm tra này.

Tiện ích vẫn gọi setState quanh lời gọi đó để màn hình hiển thị số mới.

Thử thách

Dễ

Hiện tại, Spend 5 lấy xu trực tiếp từ trường dữ liệu, khiến số xu trong ví giảm xuống dưới 0.

Thêm phương thức void spend(int amount) vào Wallet để trừ xu chỉ khi có đủ xu.
Cho nút Spend 5 gọi wallet.spend(5) bên trong setState.

Tự làm thử

import 'package:flutter/material.dart';

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

class Wallet {
  int coins = 10;

  void earn(int amount) {
    coins = coins + amount;
  }
}

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

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

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

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

class _HomePageState extends State<HomePage> {
  final wallet = Wallet();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wallet')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('${wallet.coins} coins', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  wallet.earn(3);
                });
              },
              child: const Text('Earn 3'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  wallet.coins = wallet.coins - 5;
                });
              },
              child: const Text('Spend 5'),
            ),
          ],
        ),
      ),
    );
  }
}