اضغط على عنصر قائمة

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 4 من 33.

القائمة أكثر من مجرد شيء تقرؤه: انقر على صف لاختياره. يحتوي ListTile على onTap:، وهي دالة تعمل عند النقر على الصف، وهي الفكرة نفسها الموجودة في onPressed: الخاص بالزر.

ListTile(
  title: Text(fruit),
  onTap: () {
    setState(() {
      picked = fruit;
    });
  },
)

يعرض العنصر الذي يحتوي على onTap: أيضًا تأثير تموّج عند لمسه، فيشبه الزر.

عندما تُنشأ العناصر باستخدام for، يحتفظ onTap لكل عنصر بقيمة fruit الخاصة به. يؤدي النقر على Kiwi إلى تشغيل دالته، مع ضبط fruit على 'Kiwi'.

التحدي

سهل

يعرض شريط التطبيق Pick a fruit. أضف إلى كل عنصر onTap: بحيث يؤدي النقر على ثمرة إلى تغيير شريط التطبيق ليعرض You picked Mango (مع اسم الثمرة التي تم النقر عليها).

جرّب بنفسك

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FruitPicker(),
    );
  }
}

class FruitPicker extends StatefulWidget {
  const FruitPicker({super.key});

  @override
  State<FruitPicker> createState() => _FruitPickerState();
}

class _FruitPickerState extends State<FruitPicker> {
  final List<String> fruits = ['Apple', 'Banana', 'Kiwi', 'Mango', 'Peach'];
  String picked = 'Pick a fruit';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(picked)),
      body: ListView(
        children: [
          for (String fruit in fruits)
            ListTile(
              title: Text(fruit),
            ),
        ],
      ),
    );
  }
}