Menu
CoddyTech
flag Ar iconالعربيةdown icon

الطرق في الأصناف الخاصة بك

جزء من قسم إدارة الحالة في رحلة 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 عبر الإنترنت