Menu
CoddyTech

Методы ваших классов

Часть раздела Управление состоянием путешествия по Flutter на Coddy. Урок 5 из 27.

До сих пор ваши классы хранили данные: имя, цену. Класс также может хранить код, который изменяет эти данные. Функция внутри класса называется методом:

class Wallet {
  int coins = 10;

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

Вызывайте метод через точку, как поле: wallet.earn(3). Внутри метода coins — это поле кошелька, для которого был вызван метод.

Зачем это нужно, если страница может сама выполнить wallet.coins = wallet.coins + 3? Потому что тогда правила хранятся в одном месте. Если баланс кошелька никогда не должен опускаться ниже нуля, метод spend проверяет это, и каждая кнопка, которая списывает деньги, проходит эту проверку.

Виджет по-прежнему вызывает setState вокруг вызова, чтобы на экране отображалось новое число.

challenge icon

Задание

Легко

Сейчас Spend 5 сразу вычитает монеты из поля, и баланс кошелька становится отрицательным.

  • Добавь в Wallet метод void spend(int amount), который списывает монеты только тогда, когда их достаточно.
  • Сделай так, чтобы кнопка Spend 5 вызывала wallet.spend(5) внутри setState.

Попробуйте сами

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'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Управление состоянием

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter