By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام ويدجت RadioListTile في فلاتر
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Widgets > شرح استخدام ويدجت RadioListTile في فلاتر
Widgets

شرح استخدام ويدجت RadioListTile في فلاتر

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 5 دقيقة للقراءة 2322 مشاهدات 3
شارك
شرح استخدام ويدجت RadioListTile في فلاتر
شرح استخدام ويدجت RadioListTile في فلاتر
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

Flutter هي إطار عمل متعدد المنصات يسمح للمطورين بإنشاء تطبيقات عالية الجودة التي تعمل على أنظمة iOS و Android و Web وغيرها. واحدة من العناصر الأساسية في تصميم التطبيقات هي RadioListTile، والذي يسمح للمستخدمين بتحديد خيار واحد فقط من بين قائمة.

المحتويات
ما هو RadioListTile في فلاتر؟خصائص RadioListTiletitlesubtitlevaluegroupValueonChangedactiveColortoggleablecontrolAffinityمثال على استخدام RadioListTile في Flutter

ما هو RadioListTile في فلاتر؟

RadioListTile هو عنصر تحكم يُستخدم في تطبيقات Flutter لتمكين المستخدمين من تحديد خيار واحد فقط من بين قائمة. يتم تمثيل الخيارات بعلامات اختيار (radio buttons) دائرية، يتم وضع نقطة داخل الدائرة عندما يتم تحديد الخيار.

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“


خصائص RadioListTile

تحتوي RadioListTile على عدد من الخصائص التي يمكن تعديلها لتحقيق السلوك المطلوب. فيما يلي تفاصيل كل خاصية:

title

هي عنوان العنصر التحكم RadioListTile الذي يظهر بجوار الدائرة. إذا كانت هذه الخاصية فارغة، فلن يظهر أي عنوان.

RadioListTile(
  title: Text('Option 1'),
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

subtitle

هي نص يظهر تحت العنوان ويتم استخدامه للمزيد من التفاصيل عن الخيار.

RadioListTile(
  title: Text('Option 1'),
  subtitle: Text('Option 1 is selected'),
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

value

هي القيمة التي يتم تعيينها للخيار عندما يتم تحديده.

RadioListTile(
  title: Text('Option 1'),
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“

groupValue

هي القيمة التي تم تحديدها في الخيار المحدد في المجموعة.

RadioListTile(
  title: Text('Option 1'),
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

onChanged

هي دالة تستدعى عندما يتم تغيير حالة الخيار.

RadioListTile(
  title: Text('Option 1'),
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

activeColor

هي لون الدائرة عندما يتم تحديدها.

RadioListTile(
  title: Text('Option 1'),
  activeColor: Colors.red,
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

toggleable

هي قيمة منطقية تحدد ما إذا كان بإمكان المستخدم إلغاء تحديد الخيار المحدد عن طريق النقر عليه مرة أخرى.

RadioListTile(
  title: Text('Option 1'),
  toggleable: true,
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

controlAffinity

هي موضع الدائرة في العنصر التحكم. يمكن استخدام القيمة

  • ListTileControlAffinity.leading لوضع الدائرة على اليسار من العنصر التحكم
  • ListTileControlAffinity.trailing لوضعها على اليمين.
RadioListTile(
  title: Text('Option 1'),
  controlAffinity: ListTileControlAffinity.leading,
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

مثال على استخدام RadioListTile في Flutter

يمكن استخدام RadioListTile في Flutter لتحديد خيار واحد من بين قائمة. يتم تخزين القيمة المحددة في متغير ويمكن استخدامه في التطبيق حسب الحاجة. فيما يلي مثال كامل على استخدام RadioListTile في Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Radio List Tile Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Radio List Tile Example'),
        ),
        body: Column(
          children: <Widget>[
            RadioListTile(
              title: const Text('Option 1'),
              value: 1,
              groupValue: _selectedValue,
              onChanged: (value) {
                setState(() {
                  _selectedValue = int.parse(value.toString());
                });
              },
            ),
            RadioListTile(
              title: const Text('Option 2'),
              value: 2,
              groupValue: _selectedValue,
              onChanged: (value) {
                setState(() {
                  _selectedValue = int.parse(value.toString());
                });
              },
            ),
            RadioListTile(
              title: const Text('Option 3'),
              value: 3,
              groupValue: _selectedValue,
              onChanged: (value) {
                setState(() {
                  _selectedValue = int.parse(value.toString());
                });
              },
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.done),
          onPressed: () {
            print('Selected option: $_selectedValue');
          },
        ),
      ),
    );
  }
}
مثال على استخدام RadioListTile في Flutter
شرح استخدام ويدجت RadioListTile في فلاتر 9

في هذا المثال، تم استخدام RadioListTile لتحديد خيار واحد من بين قائمة. يتم تمثيل الخيارات بعلامات اختيار دائرية، يتم تخزين القيمة المحددة في _selectedValue. عند الضغط على الزر “Done”، يتم طباعة الخيار المحدد في وحدة تحكم الإخراج كونسول.

“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“


RadioListTile هو عنصر تحكم مهم في تصميم التطبيقات بإستخدام Flutter، حيث يتيح للمستخدمين تحديد خيار واحد فقط من بين قائمة. يمكن تعديل خصائص RadioListTile لتحقيق السلوك المطلوب، مثل العنوان والنص الفرعي والقيمة المحددة ولون الدائرة النشطة وموضع الدائرة في العنصر التحكم. يمكن استخدام RadioListTile في Flutter لتحديد الخيارات في التطبيقات والتحكم في سلوك التطبيق بناءً على الخيار المحدد.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام ThemeData في فلاتر
Widgets

شرح استخدام ThemeData في فلاتر

37 2
شرح استخدام ويدجت SingleChildScrollView في فلاتر
Widgets

شرح استخدام SingleChildScrollView في فلاتر

26 1
شرح استخدام ويدجت WillPopScope في فلاتر
Widgets

شرح استخدام ويدجت WillPopScope في فلاتر

19 1
شرح استخدام ويدجت RichText في فلاتر 
Widgets

شرح استخدام ويدجت RichText في فلاتر 

20
شرح استخدام ويدجت TextButton في فلاتر
Widgets

شرح استخدام ويدجت TextButton في فلاتر

20
شرح استخدام ويدجت OutlinedButton في فلاتر
Widgets

شرح استخدام ويدجت OutlinedButton في فلاتر

28 1
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟