我如何更改图标按钮中的图标答案

【问题标题】：How i can change the icon in the Icon button我如何更改图标按钮中的图标
【发布时间】：2021-05-12 00:20:49
【问题描述】：

我正在尝试构建一个 whatsapp 克隆，并且当我正在从正面和背面更换相机时。我试图更改图标按钮中的图标，但它没有改变

我将在下面附上我的代码文件


    Widget bottomIcon({Icon icon,double size,Function onpress}){
        return IconButton(
          icon: icon,
          iconSize: size,
          color: Colors.white,
          onPressed: onpress,
        );
      }
    
    Icon iconForcam=Icon(Icons.camera_rear);
    
      @override
      Widget build(BuildContext context) {
        if (!controller.value.isInitialized) {
          return Container();
        }
        return MaterialApp(
          home: Padding(
            padding: const EdgeInsets.all(1.0),
            child: Stack(
              fit: StackFit.expand,
              children: [
                 CameraPreview(controller),
                Positioned(
                  bottom: 0,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      SizedBox(width: 20.0,),
                      bottomIcon(icon: Icon(Icons.flash_on_rounded),size: 50.0),
                      SizedBox(width: 20.0,),
                      bottomIcon(icon: Icon(Icons.fiber_manual_record_outlined),size: 100.0),
                      SizedBox(width: 30.0,),
                      bottomIcon(icon: iconForcam,size: 50.0,onpress: (){
                        setState(() {
                          if(iconForcam == Icon(Icons.camera_front)){
    
                            iconForcam = Icon(Icons.camera_rear);
                          }else if(iconForcam == Icon(Icons.camera_rear)){
                            print('rearcam');
                            iconForcam = Icon(Icons.camera_front);
                          }
                        });
                        //toggleCamera();
                      }),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
      }

我怀疑是否可以在 if 语句中比较两个图标。

【问题讨论】：

你使用StatefulWidget吗？ setState(() { iconForcam = Icon(Icons.camera_rear); });
是的，但我需要为每次点击来回更改它

标签： flutter dart icons

【解决方案1】：

你可以定义一个布尔变量

//定义

bool _isFront = true;

//用法

bottomIcon(
  icon: _isFront ? 
      Icons.camera_front : Icons.camera_rear, 
  size: 50.0, onpress: (){
      setState(() {
        _isFront = !_isFront;
      });
      //toggleCamera();
    })

【讨论】：

感谢兄弟的回答，我试过了，效果很好，兄弟

【解决方案2】：

我试过这样，结果正确

//定义


    int _oldIndex=0;
    Icon iconForcam=Icon(Icons.camera_rear);

//内部代码


    bottomIcon(icon: iconForcam,size: 50.0,onpress: (){
                        setState(() {
                          if(_oldIndex == 0){
                            iconForcam = Icon(Icons.camera_rear);
                            _oldIndex = 1;
                          }else if(_oldIndex == 1){
                            //print('rearcam');
                            iconForcam = Icon(Icons.camera_front);
                            _oldIndex = 0;
                          }
                        });
                        toggleCamera(_oldIndex);
                      }),

【讨论】：

【解决方案3】：

您可以将前置摄像头是否打开存储在 shared_prefernces 或数据库中，使用 provider/stream/bloc 将此值公开给 UI。现在您可以使用this package 来更改带有动画的图标。将这个包安装到你的flutter项目中，在文件中导入，然后将相机按钮的icon属性替换为如下代码：

AdvancedIcon(
  icon: Icons.camera_front,
  secondaryIcon: Icons.camera_rear,
  state: isFrontCameraOn ? AdvancedIconState.primary : AdvancedIconState.secondary,
)

现在图标会根据前置摄像头是否开启自动改变。

如果您对此问题的数据库或提供者部分有疑问，请告诉我。

【讨论】：