Отмена свайпа
Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 27 из 33.
Смахнуть элемент случайно легко, поэтому в хороших приложениях есть способ вернуть его: SnackBar с сообщением о том, что было удалено, и кнопкой отмены. SnackBarAction — это эта кнопка:
SnackBar(
content: Text('$item removed'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
setState(() {
items.insert(index, item);
});
},
),
)Чтобы вернуть элемент на прежнее место, запомни его позицию перед удалением. items.indexOf(item) — это его позиция, items.removeAt(index) удаляет его, а items.insert(index, item) возвращает его на то же место.
items.add(item) тоже вернёт его, но в конец списка.
Задание
СреднеКогда элемент удаляют свайпом, покажи SnackBar с текстом Milk removed (с названием элемента) и действием Undo, которое возвращает элемент на прежнее место.
Попробуйте сами
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: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final List<String> items = ['Milk', 'Bread', 'Eggs', 'Apples', 'Cheese'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('${items.length} items')),
body: ListView(
children: [
for (String item in items)
Dismissible(
key: ValueKey(item),
onDismissed: (direction) {
setState(() {
items.remove(item);
});
},
child: ListTile(title: Text(item)),
),
],
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Списки и экраны
1Прокручиваемые списки
Список с прокруткойЭлементы спискаНачало и конецНажатие на элемент спискаРазделители между строками6Вкладки, боковые панели и свайпы
Вкладки с панелью навигацииЗаливные значки для открытой вкладкиБоковая панельУдаление свайпомОтмена свайпаПотренируйтесь самостоятельно: Онлайн-компилятор Flutter