如何在颤振appBar中建立重要的“动作图标”

Question

我是一个新的颤振学习者，当我为安卓应用程序创建我的appBar时，我遇到了一个问题。在appBar的操作区域应该有一个“照相机手电筒”图标的按钮，用户可以点击这个图标从弹出菜单中选择手电筒选项( on /off/auto)，我完成了这个步骤。

但是，如果我希望appBar的操作区域上的手电筒图标随用户选择的变化而改变(例如，如果用户选择自动，那么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);
  }
}`

“动作”按钮代码是：

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;
              },
            ),`    

但是问题仍然是resolved...The图标没有变成三个点，如果我选择了弹出菜单中的手电筒状态，没什么变化。在这里输入图像描述

在这里输入图像描述

Answer 1

尝试下面的代码，您就得到了准确的输出，这就是您所描述的

输出：-

​

​

代码：-

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)
        ],
      ),
    );
  }
}

Answer 2

既然你没有发布任何代码，下面是我的建议。您可以编写如下代码：

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 
}

现在，在弹出(或其他)的回调中调用函数，并在icon按钮中使用变量appBar。