التشغيل والإيقاف باستخدام مفتاح
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 27 من 34.
مفتاح Switch هو زر التبديل بين التشغيل والإيقاف الذي تعرفه من إعدادات الهاتف. يعرض قيمة منطقية، ويخبرك عندما يبدّله أحدهم:
Switch(
value: _wifi,
onChanged: (bool value) {
setState(() {
_wifi = value;
});
},
)تحدّد value: موضع رسمه: تشغيل عند القيمة true، وإيقاف عند القيمة false. تحصل onChanged على القيمة الجديدة عند النقر على المفتاح.
لا يتحرك المفتاح من تلقاء نفسه. فالنقر لا يفعل سوى استدعاء onChanged؛ تخزّن القيمة الجديدة باستخدام setState، ثم يُعاد إنشاء الشاشة ويُرسم المفتاح في موضعه الجديد. إذا نسيت ذلك، فسيعود المفتاح إلى موضعه كلما نقرت عليه.
التحدي
سهل- اجعل المفتاح يعمل: خزّن القيمة الجديدة في
_darkباستخدامsetState. - امنح
ScaffoldقيمةbackgroundColorهيColors.blackعند تفعيل الوضع الداكن، وColors.whiteعند إيقافه. يتغير لون التسمية بالفعل.
جرّب بنفسك
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 _dark = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: const Text('Settings')),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Dark mode',
style: TextStyle(fontSize: 20, color: _dark ? Colors.white : Colors.black),
),
const SizedBox(width: 12),
Switch(
value: _dark,
onChanged: (bool value) {},
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمريرتدرّب بنفسك: مترجم Flutter عبر الإنترنت