عناصر واجهة const

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 15 من 34.

تعني const قبل القيمة أن هذه القيمة ثابتة عند كتابة الشيفرة ولا تتغير أبدًا. ستعرض const Text('Score') القيمة Score طوال مدة تشغيل التطبيق.

لماذا تخبر Dart بذلك؟ عندما تعيد setState بناء الشاشة، يمكن لـ Flutter تخطي كل عنصر واجهة مستخدم const، لأنه يعرف أن لا شيء بداخله قد تغيّر. لهذا السبب، تُسطّر محررات الشيفرة الخاصة بـ Flutter، مثل VS Code وAndroid Studio، عنصر واجهة مستخدم يمكن أن يكون const وتقترح إضافتها. من الآن فصاعدًا، تستخدم التطبيقات في هذه الدورة const حيثما كان ذلك مناسبًا.

يمتد تأثير const إلى الداخل: ففي عنصر واجهة المستخدم، يكون كل ما بين القوسين const أيضًا. لذا تكتبها مرة واحدة على عنصر واجهة المستخدم الخارجي الذي لا يتغير أبدًا:

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

يمكن أن يتغير المتغير، لذا لا يمكن أن يكون أبدًا داخل const. ضع Text('$_score') في ذلك العمود، وسيرفض Dart تجميعه، مع ظهور الخطأ «تعبير غير ثابت». الحل: أزل const من العمود وضعها على كل عنصر فرعي لا يتغير:

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

التحدي

متوسط

تزداد النتيجة عند الضغط على زر الجمع، لكن الشاشة لا تعرضها أبدًا. أسفل Score، أضف Text('$_score') بحجم 48. ستحتاج إلى نقل const من Column إلى العناصر التي لا تتغير فيها.

جرّب بنفسك

import 'package:flutter/material.dart';

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

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

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

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

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

class _HomePageState extends State<HomePage> {
  int _score = 0;

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}