使用 showdialog 和文本字段更新 Flutter 中的单个 Listview 项目

Question

我们创建了一个 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;
  }
}

Answer 1

在 Onpress Method of Alert 对话框中粘贴此代码

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => MyHomePage()));

我们会将您的页面导航到相同的页面。

Answer 2

少量更正将使您的代码正常工作：

显示对话框应该是字符串类型，这样 returns 的结果就是字符串类型。
弹出对话框时必须在 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;
  }
}

如果此解决方案适合您，请接受并给答案投赞成票。

Answer 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;
  }
}

使用 showdialog 和文本字段更新 Flutter 中的单个 Listview 项目

Updating single Listview item in Flutter using a showdialog and textfield

mobile

listview

uitextfield

dart

flutter