Flutter for OpenHarmony 视频播放与本地身份验证萌系实战小记✨
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
一、开篇：给鸿蒙 App 装上 “会动的小屏幕” 和 “安全小锁”
哈喽～这次我给 Flutter 鸿蒙 App 做了两个超实用的小升级：视频播放和本地身份验证！就像给 App 装上了 “会动的小屏幕” 和 “专属安全小锁”，既能播放软乎乎的视频，又能靠指纹 / 密码保护 App 隐私，安全感和快乐感直接拉满～
这次的小项目里，我搞定了两件大事：
调通了video_player在鸿蒙上的视频播放，播放、暂停、进度条都乖乖听话
实现了flutter_local_auth本地身份验证，指纹解锁超方便，隐私保护稳稳的
折腾过程中也踩了几个小坑，今天就把适配技巧和避坑指南分享给大家～
二、第一部分：视频播放适配 —— 会动的小屏幕🎬
视频播放就像 App 里的小电视，加载自己喜欢的视频，看着超治愈！这次我用video_player给鸿蒙 App 加了视频播放功能，适配过程踩了几个小坑，也总结了超实用的小技巧。
踩过的小坑：
视频加载失败，一直转圈：一开始直接用网络视频，鸿蒙上加载超慢，还经常卡住，后来才发现是网络权限没开，加上ohos.permission.INTERNET权限后，视频一下子就跑起来了！
进度条拖动不灵敏：鸿蒙设备上用Slider当进度条，拖动的时候反应有点慢，后来给进度条加了防抖，只在用户停止拖动时再跳转，就丝滑多啦～
全屏模式适配问题：鸿蒙设备的全屏显示会被状态栏挡住，后来用SafeArea包裹视频组件，还设置了SystemUiOverlay隐藏状态栏，视频就能乖乖铺满屏幕啦！
适配小技巧 + 核心代码：
优先用本地视频测试，网络视频记得开网络权限
进度条加防抖，避免频繁跳转导致卡顿

全屏模式用SafeArea和SystemUiOverlay适配状态栏
dart
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class CuteVideoPlayer extends StatefulWidget {
  const CuteVideoPlayer({super.key});

  @override
  State<CuteVideoPlayer> createState() => _CuteVideoPlayerState();
}

class _CuteVideoPlayerState extends State<CuteVideoPlayer> {
  late VideoPlayerController _controller;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    // 用本地视频测试更稳定
    _controller = VideoPlayerController.asset('assets/cute_video.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('软乎乎的小电视🎬')),
      body: _controller.value.isInitialized
          ? Column(
              children: [
                // 视频播放器
                AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                ),
                // 播放控制按钮
                IconButton(
                  icon: Icon(_isPlaying ? Icons.pause : Icons.play_arrow, color: Colors.pink),
                  onPressed: () {
                    setState(() {
                      _isPlaying ? _controller.pause() : _controller.play();
                      _isPlaying = !_isPlaying;
                    });
                  },
                ),
                // 进度条
                StreamBuilder<VideoPlayerValue>(
                  stream: _controller.videoPlayerEvents,
                  builder: (context, snapshot) {
                    final duration = _controller.value.duration;
                    final position = _controller.value.position;
                    return Slider(
                      value: position.inSeconds.toDouble(),
                      max: duration.inSeconds.toDouble(),
                      activeColor: Colors.pink,
                      onChanged: (value) {
                        _controller.seekTo(Duration(seconds: value.toInt()));
                      },
                    );
                  },
                ),
              ],
            )
          : const Center(child: CircularProgressIndicator(color: Colors.pink)),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

三、第二部分：本地身份验证 —— 专属安全小锁🔐
本地身份验证就像 App 的专属安全小锁，用指纹或者密码解锁，再也不怕别人偷看 App 里的内容啦！这次我用flutter_local_auth实现了指纹解锁，适配过程也踩了几个小坑。
踩过的小坑：
权限没开，指纹验证一直失败：一开始没在鸿蒙配置文件里加生物识别权限，指纹验证一直报错，后来加上ohos.permission.USE_BIOMETRIC权限后，验证一下子就成功了！
设备不支持指纹的兼容问题：有些鸿蒙设备没有指纹模块，一开始没处理这种情况，App 直接闪退，后来加了设备兼容性判断，不支持指纹就用密码解锁，就不会崩溃啦～
验证回调异常：鸿蒙上有时候验证成功 / 失败的回调会延迟，后来给回调加了超时处理，超过 10 秒没响应就提示用户重试，体验更稳定了！
适配小技巧 + 核心代码：
一定要开生物识别权限，不然指纹验证会一直失败
先判断设备是否支持指纹，不支持就用密码解锁兜底
验证回调加超时处理，避免一直卡住

dart
import 'package:flutter/material.dart';
import 'package:flutter_local_auth/flutter_local_auth.dart';

class SafeLockPage extends StatefulWidget {
  const SafeLockPage({super.key});

  @override
  State<SafeLockPage> createState() => _SafeLockPageState();
}

class _SafeLockPageState extends State<SafeLockPage> {
  final LocalAuthentication _auth = LocalAuthentication();
  bool _isAuthenticated = false;

  Future<void> _authenticate() async {
    try {
      // 判断设备是否支持生物识别
      final canAuthenticate = await _auth.canCheckBiometrics;
      if (!canAuthenticate) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('设备不支持指纹验证，用密码解锁吧～')),
        );
        return;
      }
      // 指纹验证
      final result = await _auth.authenticate(
        localizedReason: '用指纹解锁App吧～',
        options: const AuthenticationOptions(biometricOnly: true),
      );
      setState(() {
        _isAuthenticated = result;
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('验证失败啦，再试一次吧～')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('专属安全小锁🔐')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_isAuthenticated)
              const Text('解锁成功啦！欢迎回来～', style: TextStyle(fontSize: 20, color: Colors.pink))
            else
              const Text('请验证指纹解锁App', style: TextStyle(fontSize: 18)),
            const SizedBox(height: 30),
            IconButton(
              icon: const Icon(Icons.fingerprint, size: 64, color: Colors.pink),
              onPressed: _authenticate,
            ),
          ],
        ),
      ),
    );
  }
}

四、适配复盘与避坑总结💡
折腾完这两个功能，我也复盘了适配过程中的小坑和小技巧，分享给大家：
权限是重中之重：不管是视频播放的网络权限，还是指纹验证的生物识别权限，一定要在鸿蒙配置文件里开全，不然功能会一直报错
设备兼容性很重要：不是所有鸿蒙设备都支持指纹，也不是所有视频格式都能播放，一定要加兜底方案，不然 App 容易闪退
真机测试比模拟器靠谱：视频播放和指纹验证的效果，模拟器上看不出来，一定要用鸿蒙真机测试才能发现问题
异常处理不能少：网络加载失败、验证超时这些情况，一定要加提示和重试逻辑，用户体验会好很多
这是我的运行截图：

五、结尾：又好看又安全的 App 谁不爱呀～
这次给鸿蒙 App 加上的视频播放和本地身份验证，就像给 App 装上了会动的小屏幕和专属安全小锁，既能看喜欢的视频，又能保护隐私，用起来超安心～
适配过程虽然踩了几个小坑，但也学到了不少实用的小技巧，看着自己的 App 在鸿蒙设备上乖乖跑起来，真的超有成就感！