如何将弹出菜单按钮中的选定项目显示为文本？答案

【问题标题】：How to show a selected item from popup menu button as text?如何将弹出菜单按钮中的选定项目显示为文本？
【发布时间】：2020-07-24 20:23:38
【问题描述】：

我有一个弹出菜单按钮，其下方有一个文本小部件。我希望文本小部件显示用户从弹出菜单按钮中选择的内容。
Popup menu button unpressed
Popup menu button pressed
现在在下面的_mlTextWidget() 中我只能弄清楚如何硬编码一个特定的选择。

我不确定如何将所选项目与文本小部件连接起来。任何帮助将不胜感激。

// A class containing the menu items
class MLConstants {
  static const String FourX = '4x';
  static const String TenX = '10x';
  static const String TwentyFiveX = '25x';
  static const String FourtyX = '40x';
  static const String SixtyThreeX = '63x';

  static const List<String> choices3 = <String>[
    FourX,
    TenX,
    TwentyFiveX,
    FourtyX,
    SixtyThreeX
  ];
}


// Popup menu button
Widget _cameraTogglesRowWidget() {
 return PopupMenuButton<String>(
      icon: const Icon(
        Icons.zoom_in,
        color: Colors.white,
        size: 30,
      ),
      onSelected: choiceAction3,
      itemBuilder: (BuildContext context) {
        return MLConstants.choices3.map((String choice3) {
          return PopupMenuItem<String>(
            value: choice3,
            child: Text(choice3),
          );
        }).toList();
      },
    );
  }


// What happens when a menu item is pressed
  void choiceAction3(String choice3) {
    if (choice3 == MLConstants.FourX) {
      print('4x');
    } else if (choice3 == MLConstants.TenX) {
      print('10x');
    } else if (choice3 == MLConstants.TwentyFiveX) {
      print('25x');
    } else if (choice3 == MLConstants.FourtyX) {
      print('40x');
    } else if (choice3 == MLConstants.SixtyThreeX) {
      print('63x');
    }
  }


// The text widget showing the selected item
  Widget _mlTextWidget() {
    return Container(
        child: (Text("${MLConstants.FourX}",
            style: TextStyle(
              fontSize: 13,
              color: Colors.white,
            ))));
  }

【问题讨论】：

标签： flutter dart

【解决方案1】：

您需要将其置于onSelected 中的状态并在您的Text 中使用它。像这样：

  String selectedChoice3;

  void choiceAction3(String choice3) {
    setState(() {
      selectedChoice3 = choice3;
    });
    if (choice3 == MLConstants.FourX) {
      print('4x');
    } else if (choice3 == MLConstants.TenX) {
      print('10x');
    } else if (choice3 == MLConstants.TwentyFiveX) {
      print('25x');
    } else if (choice3 == MLConstants.FourtyX) {
      print('40x');
    } else if (choice3 == MLConstants.SixtyThreeX) {
      print('63x');
    }
  }


// The text widget showing the selected item
  Widget _mlTextWidget() {
    return Container(
        child: (Text("${selectedChoice3 ?? ''}",
            style: TextStyle(
              fontSize: 13,
              color: Colors.white,
            ))));
  }

当然，假设这些在 State 类中。如果没有，您可以在IntelliJ 或VSCode 中自动将StatelessWidget 转换为StatefulWidget。

【讨论】：