从列表视图中删除项目 [英] flutter delete item from listview
问题描述
我试图做
编写您的第一个Flutter应用程序,第2部分 flutter应用程序页面5
我现在对此应用程序有疑问.我想像这样从onLongPress列表中删除一个条目:
I now have a question for this application. I want to remove an entry from that List onLongPress like this:
onLongPress: () {
setState(() {
_saved.remove(pair);
});
},
这将从列表中删除该项目,但不会更新屏幕.返回家园并重新打开此路线后,新项目将被删除.但是,如何在用户不重新打开页面的情况下触发此页面上的更新.
This will remove the item from the list but won't update the screen. On returning to the home and reopening this route the new items without the deleted. But how can I trigger the update on this page without the user to reopen the page.
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: RandomWords(),
theme: new ThemeData(
primaryColor: Colors.orange,
),
);
}
}
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
final List<WordPair> _suggestions = <WordPair>[];
final TextStyle _biggerFont = const TextStyle(fontSize: 18);
final Set<WordPair> _saved = new Set<WordPair>();
_buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
},
);
}
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair);
return ListTile(
title: Text(pair.asPascalCase, style: _biggerFont),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Startup Name Generator"),
actions: <Widget>[
new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) {
final Iterable<ListTile> tiles = _saved.map(
(WordPair pair) {
return new ListTile(
//this is the delete operation
onLongPress: () {
setState(() {
_saved.remove(pair);
});
},
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final List<Widget> divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return new Scaffold(
appBar: new AppBar(
title: const Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
},
),
);
}
}
推荐答案
这是因为您正在创建新的MaterialPageRoute.
That's because you're creating a new MaterialPageRoute.
尝试一下:
onLongPress: () {
_saved.remove(pair);
Navigator.of(context).pop();
_pushSaved();
},
使用此解决方案,您仍然会看到视图的变化.如果要防止这种情况,则需要一个新的有状态页面,并进行一些重构:
With this solution you'll still see the view change. If you want to prevent that, you'll need a new stateful page, and a bit of refactoring:
- 将您的
_saved
个商品设为全局(仅在此示例中) - 删除
_pushSaved
方法 - 更新用于调用
_pushSaved
函数的onPressed
函数 - 添加有状态
DetailPage
而不是_pushSaved
方法
- Make your
_saved
items global (only for this example) - Remove the
_pushSaved
method - Update the
onPressed
function that used to call the_pushSaved
function - Add the stateful
DetailPage
instead of the_pushSaved
method
像这样:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
// create a global saved set
Set<WordPair> savedGlobal = new Set<WordPair>();
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: new RandomWords(),
);
}
}
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
final List<WordPair> _suggestions = <WordPair>[];
final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Startup Name Generator'),
actions: <Widget>[
// change the onPressed function
new IconButton(icon: const Icon(Icons.list), onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailPage()
)
);
}),
],
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (BuildContext _context, int i) {
if (i.isOdd) {
return const Divider();
}
final int index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
final bool alreadySaved = savedGlobal.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
savedGlobal.remove(pair);
} else {
savedGlobal.add(pair);
}
});
},
);
}
}
// add a new stateful page
class DetailPage extends StatefulWidget {
@override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
Iterable<ListTile> tiles = savedGlobal.map((WordPair pair) {
return new ListTile(
onLongPress: () {
setState(() {
savedGlobal.remove(pair);
});
},
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
});
final List<Widget> divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return new Scaffold(
appBar: new AppBar(
title: const Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
}
}
这篇关于从列表视图中删除项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!