Flutter CamerAwesome插件自定义拍照按钮实现方法咨询

你已经通过CameraAwesomeBuilder.custom隐藏了默认控件，接下来只需要利用PhotoCameraState提供的takePhoto()方法，在自定义按钮的点击事件中调用它就能触发拍照。

实现步骤： #

• 让你的TakePhotoUI组件接收PhotoCameraState类型的参数
• 在TakePhotoUI内部添加自定义按钮，点击时调用state.takePhoto()

完整代码示例： #

首先实现TakePhotoUI组件：

class TakePhotoUI extends StatelessWidget {
  final PhotoCameraState state;

  const TakePhotoUI(this.state, {super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        // 显示相机实时预览
        CameraPreview(state.preview),
        // 自定义拍照按钮（底部居中放置）
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 40),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: const CircleBorder(),
                padding: const EdgeInsets.all(20),
                backgroundColor: Colors.white.withOpacity(0.8),
              ),
              onPressed: () {
                // 触发拍照操作
                state.takePhoto();
              },
              child: const Icon(Icons.camera, size: 30, color: Colors.black),
            ),
          ),
        ),
      ],
    );
  }
}

然后你的主组件代码可以保持现有结构，TakePhotoUI已能接收状态并触发拍照：

SizedBox(
  width: screenWidth,
  height: screenHeight,
  child: CameraAwesomeBuilder.custom(
    builder: (cameraState, previewSize, previewRect) {
      return cameraState.when(
        onPreparingCamera: (state) =>
            const Center(child: CircularProgressIndicator()),
        onPhotoMode: (state) => TakePhotoUI(state),
        // 若需要支持其他模式，可在此补充处理逻辑
        onVideoMode: (state) => const SizedBox(),
        onVideoRecordingMode: (state) => const SizedBox(),
      );
    },
    saveConfig: SaveConfig.photo(
      pathBuilder: () => path(CaptureMode.photo),
    ),
  ),
),

关键说明： #

• onPhotoMode回调返回的state是PhotoCameraState实例，调用它的takePhoto()方法会触发拍照流程，照片会按照你配置的SaveConfig保存到指定路径。
• CameraPreview(state.preview)是显示相机画面的核心组件，必须包含在自定义UI中才能看到实时预览。

内容的提问来源于stack exchange，提问作者Amin Ulhaq