使用 showdialog 和 textfield 在 Flutter 中更新单个 Listview 项目
Posted
技术标签:
【中文标题】使用 showdialog 和 textfield 在 Flutter 中更新单个 Listview 项目【英文标题】：Updating single Listview item in Flutter using a showdialog and textfield 【发布时间】：2020-04-10 14:42:39 【问题描述】：我们创建了一个 Flutter 应用程序，它显示来自项目列表的列表视图。我们希望能够根据用户偏好更新这些。有点像如果您有一个待办事项列表并且想要使用模式或对话框更正或更新列表中的一项。
我一直在尝试使用用户键入的对话框更新列表视图中的单个项目，然后在提交时关闭。到目前为止，我没有运气，但我觉得我很接近。如何获取磁贴上的名称以在提交时更新并重新呈现页面？我错过了什么？
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
List<Animal> animals = new List();
String newName;
TextEditingController nctrl = TextEditingController();
@override
void initState()
super.initState();
animals = [
Animal(id: 1, name: 'cat'),
Animal(id: 2, name: 'dog'),
Animal(id: 3, name: 'mouse'),
Animal(id: 4, name: 'horse'),
Animal(id: 5, name: 'frog'),
];
_changePetName()
newName = nctrl.text;
Navigator.pop(context);
return newName;
_showDialog(String name)
nctrl.text = name;
showDialog(
context: context,
builder: (BuildContext context)
// return object of type Dialog
return AlertDialog(
elevation: 5,
backgroundColor: Colors.blue,
title: Text(
"Rename this pet",
),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
controller: nctrl,
onChanged: (e)
setState(() );
,
),
],
)),
actions: <Widget>[
// usually buttons at the bottom of the dialog
FlatButton(
child: Text("Close"),
onPressed: ()
Navigator.of(context).pop();
,
),
FlatButton(
color: Colors.green,
child: Text(
"Submit",
),
onPressed: ()
var updateName = _changePetName();
return updateName;
,
),
],
);
,
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: animals.length,
itemBuilder: (BuildContext context, int index)
var pet = animals[index];
return ListTile(
key: ValueKey(pet.id),
enabled: true,
onTap: () async
var rename = await _showDialog(pet.name);
if (rename != null)
pet.name = rename;
setState(() );
// setState(()
// pet.name = 'bob';
// );
,
title: Text(pet.name),
);
,
),
],
),
),
);
class Animal
final int id;
String name;
Animal(this.id, this.name);
factory Animal.fromJson(Map<dynamic, dynamic> json)
return new Animal(
id: json['id'],
name: json['name'],
);
Map<dynamic, dynamic> toJson()
final Map<dynamic, dynamic> data = new Map<dynamic, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
return data;
【问题讨论】：
【参考方案1】：让您的代码正常工作的几处更正：
-
显示对话框应为字符串类型，以便它返回的结果为字符串类型。
在弹出对话框时，您必须在 pop() 中传递数据。
等待 showDialog 方法接收结果。
以下是供您参考的工作代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
List<Animal> animals = new List();
String newName;
TextEditingController nctrl = TextEditingController();
@override
void initState()
super.initState();
animals = [
Animal(id: 1, name: 'cat'),
Animal(id: 2, name: 'dog'),
Animal(id: 3, name: 'mouse'),
Animal(id: 4, name: 'horse'),
Animal(id: 5, name: 'frog'),
];
_changePetName()
newName = nctrl.text;
Navigator.pop(context, newName);
return newName;
Future<String> _showDialog(String name) async
nctrl.text = name;
return await showDialog<String>(
context: context,
builder: (BuildContext context)
// return object of type Dialog
return AlertDialog(
elevation: 5,
backgroundColor: Colors.blue,
title: Text(
"Rename this pet",
),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
controller: nctrl,
onChanged: (e)
// setState(() );
,
),
],
)),
actions: <Widget>[
// usually buttons at the bottom of the dialog
FlatButton(
child: Text("Close"),
onPressed: ()
Navigator.of(context).pop(nctrl.text);
,
),
FlatButton(
color: Colors.green,
child: Text(
"Submit",
),
onPressed: ()
var updateName = _changePetName();
return updateName;
,
),
],
);
,
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: animals.length,
itemBuilder: (BuildContext context, int index)
var pet = animals[index];
return ListTile(
key: ValueKey(pet.id),
enabled: true,
onTap: () async
var rename = await _showDialog(pet.name);
if (rename != null)
pet.name = rename;
setState(() );
// setState(()
// pet.name = 'bob';
// );
,
title: Text(pet.name),
);
,
),
],
),
),
);
class Animal
final int id;
String name;
Animal(this.id, this.name);
factory Animal.fromJson(Map<dynamic, dynamic> json)
return new Animal(
id: json['id'],
name: json['name'],
);
Map<dynamic, dynamic> toJson()
final Map<dynamic, dynamic> data = new Map<dynamic, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
return data;
如果此解决方案适合您，请接受并投票。
【讨论】：
谢谢@Kalpesh Kundanani，这个解决方案按我们想要的方式工作。感谢您的帮助！ 太好了... :)【参考方案2】：在 Onpress Method of Alert 对话框中粘贴此代码
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (_) => MyHomePage()));
我们会将您的页面导航到相同的页面。
【讨论】：
感谢@Rutvik Gumasana 的帮助。这个解决方案对我不起作用，因为如果我 pushReplacement，我还有一些其他数据会被擦除。如果您有兴趣，上述解决方案效果很好。【参考方案3】：试试这个，
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
List<Animal> animals = new List();
String newName;
TextEditingController nctrl = TextEditingController();
@override
void initState()
super.initState();
animals = [
Animal(id: 1, name: 'cat'),
Animal(id: 2, name: 'dog'),
Animal(id: 3, name: 'mouse'),
Animal(id: 4, name: 'horse'),
Animal(id: 5, name: 'frog'),
];
_showDialog(int index)
nctrl.text = animals[index].name;
showDialog(
context: context,
builder: (BuildContext context)
// return object of type Dialog
return AlertDialog(
elevation: 5,
backgroundColor: Colors.blue,
title: Text(
"Rename this pet",
),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
controller: nctrl,
onChanged: (e)
setState(() );
,
),
],
)),
actions: <Widget>[
// usually buttons at the bottom of the dialog
FlatButton(
child: Text("Close"),
onPressed: ()
Navigator.of(context).pop();
,
),
FlatButton(
color: Colors.green,
child: Text(
"Submit",
),
onPressed: ()
setState(()
animals[index].name = nctrl.text;
);
Navigator.pop(context);
,
),
],
);
,
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: animals.length,
itemBuilder: (BuildContext context, int index)
var pet = animals[index];
return ListTile(
key: ValueKey(pet.id),
enabled: true,
onTap: () async
var rename = await _showDialog(index);
if (rename != null)
animals[index].name = rename;
setState(() );
// setState(()
// pet.name = 'bob';
// );
,
title: Text(pet.name),
);
,
),
],
),
),
);
class Animal
final int id;
String name;
Animal(this.id, this.name);
factory Animal.fromJson(Map<dynamic, dynamic> json)
return new Animal(
id: json['id'],
name: json['name'],
);
Map<dynamic, dynamic> toJson()
final Map<dynamic, dynamic> data = new Map<dynamic, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
return data;
【讨论】：
感谢您的帮助@Nardeppsinh Vaghela。这个解决方案效果很好。 关键是关键！！，我在找这个，以上是关于使用 showdialog 和 textfield 在 Flutter 中更新单个 Listview 项目的主要内容，如果未能解决你的问题，请参考以下文章