在 Flutter 的 SimpleDialog 中将项目添加到 ListView

Question

我正在尝试创建一个 SimpleDialog 来选择带有按钮的标签，以将新标签添加到列表中。标记颜色和图标已映射。

我设法用默认列表构建了一个对话框，但在按下最后一个选项时它没有更新（_addTagOption 没有按预期向 ListView 添加新标签）。

知道我做错了什么吗？

相关代码如下：

void _showDialog() {
    Map<IconData, Color> tagMap = {
      Icons.work: Colors.blue[900],
      Icons.beach_access: Colors.lightGreen,
      Icons.local_dining: Colors.lightGreen,
      Icons.supervised_user_circle: Colors.green,
      Icons.people: Colors.green,
      Icons.favorite_border: Colors.green,
      Icons.directions_run: Colors.deepOrange,
      Icons.directions_car: Colors.blueGrey,
      Icons.hotel: Colors.deepPurpleAccent,
    };
    var tagIconList = tagMap.keys.toList();
    var tagColorList = tagMap.values.toList();

    List<String> tagNames = [
      'Work',
      'Relax',
      'Eating',
      'Family',
      'Friends',
      'Relationship',
      'Sport',
      'Transport',
      'Sleep'
    ];

    int itemCount = tagMap.length;
    _addTagOption(){
      setState(() {
        tagMap[Icons.laptop] = Colors.deepOrange;
        tagNames.add('Challenge');
        itemCount = itemCount + 1;
      });
    }

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10.0))),
              children: <Widget>[
            Container(
                width: double.maxFinite,
                child: ListView.builder(
                    itemCount: itemCount,
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int itemCount) {
                      return SimpleDialogOption(
                          onPressed: () {
                            Navigator.of(context).pop();
                            setState(() {
                              displayTagColor = tagColorList[itemCount];
                              displayTagIcon = tagIconList[itemCount];
                            });
                          },
                          child: Row(
                            children: <Widget>[
                              Icon(
                                tagIconList[itemCount],
                                color: tagColorList[itemCount],
                              ),
                              Padding(
                                  padding: EdgeInsets.only(left: 25),
                                  child: Text(tagNames[itemCount]))
                            ],
                          ));
                    })),
            SimpleDialogOption(
              onPressed: () {
                setState(() {
                  _addTagOption();
                });
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.add,
                    size: 25,
                    color: Color(0x8A000000),
                  ),
                  Padding(
                      padding: EdgeInsets.only(left: 5),
                      child: Text('ADD NEW', style: TextStyle(color: Color(0x8A000000)),))
                ],
              ),
            )
          ]);
        });
  }

Answer 1

SimpleDialog 已经构建，因此当您更改 list/map 时，它确实会更改变量的值，但会被机器人反射。尝试添加 print 以观察值。基本上重绘 SimpleDialog 只是再次弹出 SimpleDialog 调用。像这样

class TagScreen extends StatefulWidget {
  @override
  _TagScreenState createState() => _TagScreenState();
}

class _TagScreenState extends State<TagScreen> {
  Map<IconData, Color> tagMap = {
    Icons.work: Colors.blue[900],
    Icons.beach_access: Colors.lightGreen,
    Icons.local_dining: Colors.lightGreen,
    Icons.supervised_user_circle: Colors.green,
    Icons.people: Colors.green,
    Icons.favorite_border: Colors.green,
    Icons.directions_run: Colors.deepOrange,
    Icons.directions_car: Colors.blueGrey,
    Icons.hotel: Colors.deepPurpleAccent,
  };
  var tagIconList = [];
  var tagColorList = [];

  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    initData();
  }

  initData() {
    tagIconList = tagMap.keys.toList();
    tagColorList = tagMap.values.toList();
  }

  List<String> tagNames = [
    'Work',
    'Relax',
    'Eating',
    'Family',
    'Friends',
    'Relationship',
    'Sport',
    'Transport',
    'Sleep'
  ];

  _addTagOption() async {
    setState(() {
      tagMap.putIfAbsent(Icons.laptop, () => Colors.deepOrange);
      tagNames.add('Challenge');
      initData();
    });
    Navigator.of(context).pop();
    _showDialog();
  }

  void _showDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
              children: <Widget>[
                Container(
                    width: double.maxFinite,
                    child: ListView.builder(
                        itemCount: tagMap.length,
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int itemCount) {
                          return SimpleDialogOption(
                              onPressed: () {
                                setState(() {
                                  _selectedIndex = itemCount;
                                });
                                Navigator.of(context).pop();
                              },
                              child: Row(
                                children: <Widget>[
                                  Icon(
                                    tagIconList[itemCount],
                                    color: tagColorList[itemCount],
                                  ),
                                  Padding(padding: EdgeInsets.only(left: 25), child: Text(tagNames[itemCount]))
                                ],
                              ));
                        })),
                SimpleDialogOption(
                  onPressed: _addTagOption,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.add,
                        size: 25,
                        color: Color(0x8A000000),
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 5),
                          child: Text(
                            'ADD NEW',
                            style: TextStyle(color: Color(0x8A000000)),
                          ))
                    ],
                  ),
                )
              ]);
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "TAGS",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Column(
        children: <Widget>[
          Text("Selected Tag"),
          SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                tagIconList[_selectedIndex],
                color: tagColorList[_selectedIndex],
              ),
              Padding(padding: EdgeInsets.only(left: 25), child: Text(tagNames[_selectedIndex]))
            ],
          ),
          SizedBox(
            height: 20,
          ),
          RaisedButton(
            onPressed: _showDialog,
            child: Text("Select TAG"),
          )
        ],
      ),
    );
  }
}

希望对您有所帮助:)

在 Flutter 的 SimpleDialog 中将项目添加到 ListView

Add item to ListView inside SimpleDialog in Flutter

maps

listview

dialog

showdialog

flutter