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

Question

我正在尝试构建一个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 语句中比较两个图标。

Answer 1

您可以定义一个 boolean 变量

//定义

bool _isFront = true;

//用法

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

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

Answer 3

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

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

现在图标将根据前置摄像头是否打开而自动更改。

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