如何在 flutter appBar 中构建 Stateful "Action Icons"

Question

我是 Flutter 的新手，在为 Android 个应用程序创建 appBar 时遇到了问题。 appBar的操作区域应该有一个“相机手电筒”图标的按钮，用户可以点击这个图标从弹出菜单中选择手电筒选项（on/off/auto），我完成了这一步。

但是如果我想让appBar操作区的手电筒图标随着用户选择的变化而变化（比如用户选择auto，那么appBar的图标应该显示一个“自动手电筒”），我该怎么办实现了吗？

在此先感谢您。

我曾尝试在 appBar 操作图标小部件中使用“if”，但失败了。

现在我在 appBar.dart 中的代码是

`Icon flashIcon = Icon(Icons.flash_auto);
FlashMode flashstate;

setIcon([Icon Function() param0]) {
  if (flashstate == FlashMode.off) {
    setIcon(() => flashIcon = Icon(Icons.flash_off));
  } else if (flashstate == FlashMode.torch) {
    flashIcon = Icon(Icons.flash_on);
  } else if (flashstate == FlashMode.always) {
    flashIcon = Icon(Icons.flash_on);
  } else {
    flashIcon = Icon(Icons.flash_auto);
  }
}`

Action按钮代码为：`

PopupMenuButton<String>(
              icon: setIcon(),

              onSelected: widget.isFlash,
              itemBuilder: (context) {
                List<PopupMenuEntry<String>> menuEntries2 = [
                  const PopupMenuItem<String>(
                    child: Icon(
                      Icons.flash_auto,
                      color: Colors.black,
                    ),
                    value: 'auto',
                  ),
                  const PopupMenuItem<String>(
                    child: Icon(Icons.flash_off, color: Colors.black),
                    value: 'off',
                  ),
                  const PopupMenuItem<String>(
                    child: Icon(Icons.flash_on, color: Colors.black),
                    value: 'torch',
                  ),
                ];
                return menuEntries2;
              },
            ),`

但是问题还是没有解决...图标变成了三个点，在弹出的菜单中选择手电筒状态，没有任何变化。 enter image description here

enter image description here

Answer 1

由于您还没有发布任何代码，这是我的建议。你可以这样写代码：

Icon icon = Icon(Icons./*icon name*/);

然后创建如下函数：

setIcon() {
   //here you use the value of your popup(or whatever you are using to let the user choose the state of flash) to change icon
   //example 
   if(value == **condition**) {
       setState(() => icon = /*new icon*/);
   } else {...} //and so on for all conditions 
   //or use a switch case if you prefer 
}

现在您在弹出窗口（或其他）的回调中调用该函数，并在您的 appBar 按钮中使用变量 icon。

Answer 2

尝试下面的代码，你得到了你描述的确切输出

输出：-

代码:-

import 'package:flutter/material.dart';

class OptionMenuExample extends StatefulWidget {
  const OptionMenuExample({Key? key}) : super(key: key);

  @override
  State<OptionMenuExample> createState() => _OptionMenuExampleState();
}

class _OptionMenuExampleState extends State<OptionMenuExample> {
  int selectedValue = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Appbar"),
        actions: [
          PopupMenuButton(
            initialValue: selectedValue,
            onSelected: (int value) => setState(() {
              selectedValue = value;
            }),
            child: Icon(
                selectedValue == 1
                    ? Icons.flash_off
                    : selectedValue == 2
                        ? Icons.flash_auto
                        : Icons.flash_on,
                color: Colors.black),
            itemBuilder: (context) => const [
              PopupMenuItem(
                child: Icon(Icons.flash_on, color: Colors.black),
                value: 0,
              ),
              PopupMenuItem(
                child: Icon(Icons.flash_off, color: Colors.black),
                value: 1,
              ),
              PopupMenuItem(
                child: Icon(Icons.flash_auto, color: Colors.black),
                value: 2,
              ),
            ],
          ),
          const SizedBox(width: 16.0)
        ],
      ),
    );
  }
}

如何在 flutter appBar 中构建 Stateful "Action Icons"

How to build Stateful "Action Icons" in flutter appBar

flutter

dart

flutter-android

flutter-appbar