Liste ve onTap

Liste satırına onTap ekleyip görevi tamamlama işaretlersin.

Liste satırına onTap

Liste satırına dokunulduğunda görevin tamamlanma durumunu değiştirmek için onTap kullanılır. ListTile'ın onTap callback'inde, ilgili Todo'nun done alanını tersine çevirir ve setState ile ekranı yeniden çizersin.

ListTile(
  title: Text(todo.title),
  onTap: () {
    setState(() {
      todo.done = !todo.done;
    });
  },
)

done alanını tersine çevirme

Görevi tamamlamak için todo.done = !todo.done ifadesi kullanılır. Bu, true'yu false'a, false'u true'ya çevirir. Değişikliğin ekranda görünmesi için bu işlem setState içinde yapılmalıdır; aksi halde ekran yeniden çizilmez.

Uygulama Görevi tamamla

tamamla adında bir fonksiyon yaz; List<Todo> ve int index parametreleri alsın, ilgili Todo'nun done alanını true yapsın ve 'Tamamlandi' yazdırsın. main içinde iki görevli bir liste oluştur ve tamamla'yı 0 indeksiyle çağır.

Örnek çözümü göster

import 'package:flutter/material.dart';

class Todo {
  String title;
  bool done;
  Todo({required this.title, this.done = false});
}

void tamamla(List<Todo> list, int index) {
  list[index].done = true;
  print('Tamamlandi');
}

void main() {
  final list = [Todo(title: 'A'), Todo(title: 'B')];
  tamamla(list, 0);
}

Kendini test et

setState ne işe yarar?
- Klavyeyi açar
- Navigator'ı çağırır
- Widget'ı yeniden çizer
- Listeyi siler
Cevabı göster

Widget'ı yeniden çizer — setState, State içindeki değişiklikten sonra widget'ı yeniden çizmek için kullanılır; klavye açmaz, Navigator çağırmaz, listeyi silmez.

setState çağrısı

onTap: () {
  ____(() {
    todo.done = !todo.done;
  });
},

Cevabı göster

onTap: () {
  setState(() {
    todo.done = !todo.done;
  });
},

onTap ve setState parçaları

onTap

Satıra dokunma callback'i
setState

Ekranı yeniden çizer
done

Tamamlanma alanı
ListTile

Satır widget'ı

Sıradaki ders: Silme ve ayraç

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler