Flutter：Select AlertDialog 上的图标并显示新图标

Question

我正在尝试在 flutter 中使用 AlertDialog，用户可以在其中按卡片以 select 一个图标。一旦他们 select 编辑了图标，AlertDialog 应该会显示新 select 编辑的图标。

现在，每次用户点击卡片时，卡片都会重新加载。但是，这意味着如果我 select 一个图标，我需要点击 select 第二个图标才能重新加载我之前的更改。

欢迎所有关于如何处理此类事情的建议and/or。

下面是我的代码：

import 'package:flutter/material.dart';
import 'package:test_003/data/dataStoreLegendItems.dart'; //has defaultIcon which should get updated
import 'package:test_003/dialogs/iconPickerDialog.dart';

class IconPickerCard extends StatefulWidget {
  var alertDialogContext;
  IconPickerCard({this.alertDialogContext});
  @override
  _IconPickerCardState createState() => _IconPickerCardState();
}

class _IconPickerCardState extends State<IconPickerCard> {
  @override

  Widget build(BuildContext context) {
    return new Card(
      child: ListTile(
        leading: legendItems.defaultIcon,
        title: Text('Select Icon'),
        onTap: () async {
          setState(() {
            print("First line of IconPickerCard set state");
            showIconPickerDialog(widget.alertDialogContext);
            print('Icon Picker Card List Tile pressed');
          });
        },
      ),
    );
  }
}

这由警报对话框调用：

import 'package:flutter/material.dart';
import 'package:test_003/components/iconPickerForPopup.dart';

class ReuseAddPopup extends StatefulWidget {
  @override
  _ReuseAddPopupState createState() => _ReuseAddPopupState();
}

class _ReuseAddPopupState extends State<ReuseAddPopup> {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Column(
        children: [
          IconPickerCard(alertDialogContext: context),
        ],
      ),
    );
  }
}

这是它的样子： Alert Dialog 然后当卡片被按下时： IconPicker 在图标被 selected 之后，更改不会反映在卡片上，直到再次按下卡片： After Icon is selected

Answer 1

modalBottomSheet 和 showDialog 等覆盖小部件的上下文不同，因此状态不会重建，要进行重建，我们必须像这样用 StatefulBuilder 小部件包装它:-

  @override

  Widget build(BuildContext context) {
    return StatefulBuilder(
          builder: (BuildContext context, StateSetter dialogState /*You can rename this!*/) {
    return  Card(
      child: ListTile(
        leading: legendItems.defaultIcon,
        title: Text('Select Icon'),
        onTap: () async {
          dialogState(() {
            print("First line of IconPickerCard set state");
            showIconPickerDialog(widget.alertDialogContext);
            print('Icon Picker Card List Tile pressed');
          });
        },
      ),
    );
  }
        
      });

建议在对 AlertDialog 的调用中使用它并使所有内容无状态。

Flutter：Select AlertDialog 上的图标并显示新图标

Flutter: Select an icon on an AlertDialog and show the new icon

flutter

flutter-alertdialog