إظهار وإخفاء عنصر واجهة

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

لإظهار عنصر واجهة مستخدم أحيانًا فقط، ضع if قبله مباشرةً، داخل قائمة children:

Column(
  children: [
    const Text('Question'),
    if (_showHint) const Text('A hint'),
  ],
)

عندما تكون قيمة _showHint هي false، لا يكون التلميح مخفيًا؛ بل لا يكون موجودًا في القائمة أصلًا، وتتحرك عناصر واجهة المستخدم التي تليه إلى الأعلى لملء المساحة. وعندما تكون قيمته true، يكون التلميح موجودًا. لا يحتوي هذا الـ if على أقواس معقوفة ولا على else؛ فهو صيغة if الخاصة بالقوائم، مثل for الذي استخدمته لإنشاء قائمة من عناصر واجهة المستخدم.

عادةً ما يبدّل الزر الذي يُظهر شيئًا ويخفيه قيمة bool باستخدام !، ويغيّر التسمية الخاصة به باستخدام ? :.

التحدي

سهل

تظهر الإجابة Paris على الشاشة دائمًا. اعرضها فقط عندما تكون _showAnswer صحيحة. يبدّل الزر بالفعل قيمة _showAnswer؛ اجعل نصه Show answer عندما تكون الإجابة مخفية وHide answer عندما تكون ظاهرة.

جرّب بنفسك

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> {
  bool _showAnswer = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Quiz')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('What is the capital of France?', style: TextStyle(fontSize: 20)),
            const Text('Paris', style: TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showAnswer = !_showAnswer;
                });
              },
              child: const Text('Show answer'),
            ),
          ],
        ),
      ),
    );
  }
}