في Flutter، يعد SwitchListTile عنصر واجهة المستخدم الذي يتيح للمستخدم تفعيل أو إلغاء تفعيل خاصية معينة في التطبيق. يتميز SwitchListTile بالمظهر البسيط والمتكامل، حيث يتضمن عنصر التحكم والعنوان في نفس الخطوة. يتيح لك Flutter تخصيص SwitchListTile بسهولة باستخدام مجموعة من الخصائص.
خصائص SwitchListTile
title
يتحكم title في العنوان الأساسي الذي يتم عرضه في SwitchListTile.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, ),
value
تتحكم value في حالة التبديل الحالية لـ SwitchListTile. عندما يكون value true، يكون SwitchListTile مفعلًا، وعندما يكون false، يكون SwitchListTile غير مفعل.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, ),
“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“
onChanged
تستخدم onChanged لتحديد الإجراء الذي يتم تنفيذه عند تغيير حالة التبديل في SwitchListTile. يمكن استخدامه لتحديث قيمة متغير أو تنفيذ أي إجراء آخر.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; // Do something else }); }, ),
activeColor
تتحكم activeColor في لون SwitchListTile عندما يكون مفعلًا.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, activeColor: Colors.blue, ),
“اقرأ أيضاً: شرح استخدام ويدجت WillPopScope في فلاتر“
activeTrackColor
يتحكم activeTrackColor في لون المسار المستخدم عندما يكون SwitchListTile مفعلًا.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, activeTrackColor: Colors.lightBlueAccent, ),
inactiveTrackColor
يتحكم inactiveTrackColor في لون المسار المستخدم عندما يكون SwitchListTile غير مفعل.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, inactiveTrackColor: Colors.grey, ),
contentPadding
يتحكم contentPadding في التباعد بين SwitchListTile وحوافه.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, contentPadding: EdgeInsets.symmetric(horizontal: 16), ),
secondary
يتحكم secondaryفي العنصر الفرعي الذي يتم عرضه بجانب عنوان SwitchListTile. يمكن استخدامه لعرض أي عنصر مثل رمز أيقونة أو صورة.
bool _switchValue = false; SwitchListTile( title: Text('Switch List Tile'), value: _switchValue, onChanged: (bool value) { setState(() { _switchValue = value; }); }, secondary: Icon(Icons.lightbulb), ),
مثال على استخدام SwitchListTile في فلاتر
هذا هو مثال على استخدام SwitchListTile في Flutter:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'SwitchListTile Example', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'SwitchListTile Example'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _switchValue = false; void _onSwitchChanged(bool value) { setState(() { _switchValue = value; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ const Text( 'SwitchListTile Example', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, ), ), const SizedBox(height: 16), SwitchListTile( title: const Text('Toggle Switch'), value: _switchValue, onChanged: _onSwitchChanged, activeColor: Colors.green, activeTrackColor: Colors.lightGreenAccent, inactiveTrackColor: Colors.grey[300], contentPadding: const EdgeInsets.symmetric(horizontal: 16), secondary: const Icon(Icons.power_settings_new), ), const SizedBox(height: 16), const Divider(thickness: 2), const SizedBox(height: 16), Text( 'Switch Value: $_switchValue', style: const TextStyle(fontSize: 18), ), ], ), ), ); } }
في هذا المثال، تم استخدام SwitchListTile لتمكين المستخدم من تفعيل وإلغاء تفعيل خاصية معينة في التطبيق. تم تخصيص الخصائص الخاصة بـ SwitchListTile بطريقة مختلفة، بما في ذلك activeColor وactiveTrackColor وinactiveTrackColor وcontentPadding وsecondary.
تم أيضًا إضافة عناصر واجهة المستخدم الأخرى مثل العنوان والفاصل وعرض قيمة التبديل الحالية.
“اقرأ أيضاً: شرح استخدام ويدجت InkWell في فلاتر“
يعد SwitchListTile عنصر واجهة مستخدم مفيد وسهل الاستخدام في Flutter. يمكن تخصيص كل من خصائصه لتتناسب مع متطلبات التطبيق الخاص بك. استخدم هذا الدليل للتحكم في كل خاصية في SwitchListTile بسهولة.