تعریف Listener

تعداد بازدید ها : 1,752 بازدید
 تعریف Listener

Listener به معنی شنونده ، وظیفه شناسایی تغییرات در ویجت تحت نظر خود را دارد . به عنوان مثال شما اگر یک کنترلر از نوع TextEditingController تعریف نمایید و آن را به خصوصیت controller ویجت TextFormField یا ویجت TextField متصل نمایید ، می توانید توسط یک Listener مقادیر ثبت شده توسط کاربر در ویجت ها را آشکار نمایید . این قابلیت در زمانی که شما مایلید به ازای هر کلید فشرده شده ، کنترلی را انجام و واکنشی نشان دهید ( مثلا از درج کاراکترهای خاص جلوگیری نمایید ) کاربرد دارد و یا اگر مایل باشید کاربر به ازای فشرده دکمه های جهت نما از صفحه کلید باعث جابجایی یک ویجت در صفحه گردد ، باز هم راه حل استفاده از شنونده هاست .

قطعه کد زیر روش تعریف یک Listener را به نمایش گذاشته است :

  1. import 'package:flutter/material.dart';
  2. void main() {
  3. runApp(MaterialApp(
  4. debugShowCheckedModeBanner: false,
  5. home: MyApp(),
  6. ));
  7. }
  8. class MyApp extends StatefulWidget {
  9. @override
  10. _MyAppState createState() => _MyAppState();
  11. }
  12. class _MyAppState extends State<MyApp> {
  13. // تعریف کنترلر
  14. var textController = new TextEditingController();
  15. String _textInput = '';
  16. @override
  17. void initState() {
  18. // TODO: implement initState
  19. super.initState();
  20. textController.addListener(() {
  21. setState(() {
  22. _textInput = textController.text;
  23. });
  24. });
  25. }
  26. @override
  27. Widget build(BuildContext context) {
  28. return Scaffold(
  29. appBar: AppBar(
  30. title: Text('Listener'),
  31. ),
  32. body: Padding(
  33. padding: const EdgeInsets.all(20),
  34. child: Center(
  35. child: Column(
  36. mainAxisAlignment: MainAxisAlignment.center,
  37. children: <Widget>[
  38. SizedBox(
  39. width: 100,
  40. height: 100,
  41. child: Image.network(
  42. 'https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')),
  43. SizedBox(
  44. height: 60,
  45. ),
  46. Text(
  47. _textInput,
  48. style: TextStyle(fontSize: 38),
  49. ),
  50. SizedBox(
  51. height: 60,
  52. ),
  53. InputFieldArea(
  54. textController: textController,
  55. )
  56. ],
  57. ),
  58. ),
  59. ),
  60. );
  61. }
  62. }
  63. class InputFieldArea extends StatelessWidget {
  64. // تعریف یک خصوصیت کنترلر
  65. final TextEditingController textController;
  66. // تعریف سازنده کلاس و دریافت کنترلر از ورودی
  67. InputFieldArea({@required this.textController});
  68. @override
  69. Widget build(BuildContext context) {
  70. return Container(
  71. margin: EdgeInsets.only(bottom: 10),
  72. child: TextField(
  73. // اتصال کنترلر به ویجت
  74. controller: textController,
  75. ));
  76. }
  77. }
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {
  // تعریف کنترلر
  var textController = new TextEditingController();

  String _textInput = '';

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    textController.addListener(() {
      setState(() {
        _textInput = textController.text;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Listener'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                  width: 100,
                  height: 100,
                  child: Image.network(
                      'https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')),
              SizedBox(
                height: 60,
              ),
              Text(
                _textInput,
                style: TextStyle(fontSize: 38),
              ),
              SizedBox(
                height: 60,
              ),
              InputFieldArea(
                textController: textController,
              )
            ],
          ),
        ),
      ),
    );
  }
}

class InputFieldArea extends StatelessWidget {
  // تعریف یک خصوصیت کنترلر
  final TextEditingController textController;

  // تعریف سازنده کلاس و دریافت کنترلر از ورودی
  InputFieldArea({@required this.textController});

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(bottom: 10),
        child: TextField(
          // اتصال کنترلر به ویجت
          controller: textController,
        ));
  }
}

خروجی کد فوق در تصویر زیر قابل مشاهده است :

می خوانم   ویجت SliverAppBar

Listenerجهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

امیدوارم این مطلب برای شما مفید باشد .

محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم. همانند سایر کارشناسان IT در تلاشم تا دنیا جای زیباتری برای زندگی باشد. بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید. آدرس ایمیل : mjfakhr@yahoo.com

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سیزده + 14 =