تعطيل زر بصريًا
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 21 من 34.
في درس الزر الأول، جعلت onPressed: null الزر رماديًا. والآن يمكنك تحديد ذلك أثناء تشغيل التطبيق: عيّن الدالة إلى onPressed عندما يكون الزر مناسبًا، وعيّن null عندما لا يكون كذلك.
ElevatedButton(
onPressed: _count > 0 ? _decrease : null,
child: const Text('Minus'),
)يختار ? : بين الطريقة وnull. في كل مرة تعيد فيها setState بناء الشاشة، يُجرى التحقق مجددًا، لذلك يتحول الزر إلى اللون الرمادي ثم يصبح مفعّلًا من تلقاء نفسه.
يُخبر الزر الرمادي الأشخاص بسبب عدم حدوث أي شيء قبل أن ينقروا عليه. أما الزر الذي يمكن الضغط عليه لكنه لا يفعل شيئًا بصمت، فيبدو وكأنه معطّل.
التحدي
سهليمكن أن يصبح عدد العناصر في سلة التسوق أقل من الصفر. اجعل زر Remove باهتًا عندما لا توجد عناصر، بحيث لا يمكن الضغط عليه إلا عندما تكون قيمة _items أكبر من 0.
جرّب بنفسك
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 _items = 0;
void _add() {
setState(() {
_items++;
});
}
void _remove() {
setState(() {
_items--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Cart')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Items: $_items', style: const TextStyle(fontSize: 24)),
const SizedBox(height: 16),
ElevatedButton(onPressed: _add, child: const Text('Add')),
ElevatedButton(onPressed: _remove, child: const Text('Remove')),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير5اتخاذ القرارات
bool والعامل ? :اتخاذ القرارات باستخدام if وelseAnd وOr وNot في Dartإظهار وإخفاء عنصر واجهةتعطيل زر بصريًاتدرّب بنفسك: مترجم Flutter عبر الإنترنت