حدّد مربع الاختيار
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 28 من 34.
يعمل Checkbox مثل Switch: له value: لرسمه، وonChanged تردّ عليه باستخدام setState.
Checkbox(
value: _agreed,
onChanged: (bool? value) {
setState(() {
_agreed = value ?? false;
});
},
)هناك اختلاف واحد: قيمته هي bool?، أي قيمة من النوع bool أو null. يمكن لمربع الاختيار أن يكون له حالة ثالثة فارغة، لكنك لن تستخدمها هنا. بما أن _agreed من النوع bool العادي، حوّل القيمة null المحتملة إلى false باستخدام ??، كما فعلت مع int.tryParse.
غالبًا ما يكون مربع الاختيار هو ما يتيح الضغط على زر: ضع علامة على «أوافق»، وسيتوقف زر «متابعة» عن الظهور باللون الرمادي.
التحدي
سهل- اجعل مربع الاختيار يُحدَّد ويُزال تحديده: خزّن قيمته في
_agreed. - اجعل
Continueباللون الرمادي إلى أن يتم تحديد المربع.
جرّب بنفسك
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 _agreed = false;
void _continue() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Welcome!')),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Rules')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Checkbox(
value: _agreed,
onChanged: (bool? value) {},
),
const Text('I agree to the rules'),
],
),
const SizedBox(height: 16),
ElevatedButton(onPressed: _continue, child: const Text('Continue')),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمريرتدرّب بنفسك: مترجم Flutter عبر الإنترنت