Flutter for OpenHarmony 应用更新检测与萌系搜索功能实战小记✨

Flutter for OpenHarmony 应用更新检测与萌系搜索功能实战小记✨

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

一、开篇：给鸿蒙 App 加上两个 "实用小可爱"

哈喽～这次我给 Flutter 鸿蒙 App 做了两个超实用又可爱的小功能：应用更新检测和萌系搜索！就像给 App 装上了 "小闹钟" 和 "小放大镜"，既能提醒用户更新到最新版本，又能让用户用软软糯糯的方式找到想要的内容，体验感直接拉满～

这次的小项目里，我搞定了两件大事：

实现了应用更新检测功能，App 会乖乖检查版本，有更新时弹出软乎乎的提示框

打造了超 Q 的萌系搜索功能，带动效的输入框和软萌提示语，用起来超治愈

折腾完这两个功能，我也复盘了适配过程中的小坑和小技巧，分享给大家～

二、第一部分：应用更新检测 ------App 的 "贴心小闹钟"⏰

应用更新检测就像 App 的贴心小闹钟，会定时检查有没有新版本，要是有更新，就弹出软乎乎的提示框，提醒用户升级，再也不用担心用户一直用旧版本啦！

踩过的小坑：

一开始直接写请求的时候，App 会频繁调用更新接口，像个吵吵闹闹的小闹钟，不仅浪费流量，还会影响性能。后来我加了缓存控制，就像给闹钟加了 "贪睡模式"，每天只检查一次，既不吵也不耽误事～还有鸿蒙系统的权限问题，一开始没配置网络权限，App 连不上更新服务器，折腾了好久才发现是权限没开～

适配小技巧：

给更新检测加缓存控制，比如 24 小时内只请求一次，避免频繁调用接口

用 dio 发送 GET 请求获取版本信息，配置超时时间，网络不好的时候不会卡住

提示框用圆角和软萌文案，比如 "有新版本啦，要不要升级呀？"，拒绝生硬的弹窗

更新检测核心代码

dart 复制代码

dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class UpdateChecker {
  final Dio _dio = Dio();
  final String updateUrl = 'https://api.example.com/version';

  // 缓存控制：24小时内只检查一次
  Future<bool> shouldCheckUpdate() async {
    final prefs = await SharedPreferences.getInstance();
    final lastCheck = prefs.getInt('last_update_check') ?? 0;
    final now = DateTime.now().millisecondsSinceEpoch;
    // 24小时 = 86400000毫秒
    return now - lastCheck > 86400000;
  }

  // 检查更新
  Future<Map<String, dynamic>> checkUpdate() async {
    try {
      final response = await _dio.get(updateUrl);
      await SharedPreferences.getInstance().then((prefs) {
        prefs.setInt('last_update_check', DateTime.now().millisecondsSinceEpoch);
      });
      return response.data;
    } on DioException catch (e) {
      return {'hasUpdate': false, 'message': '暂时无法获取更新信息哦～'};
    }
  }
}

// 弹窗提示
void showUpdateDialog(BuildContext context, Map<String, dynamic> data) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      title: const Text('有新版本啦～', style: TextStyle(color: Colors.pink)),
      content: Text(data['message'] ?? '修复了一些小bug，用起来更丝滑啦！'),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: const Text('下次再说')),
        ElevatedButton(onPressed: () {}, style: ElevatedButton.styleFrom(backgroundColor: Colors.pink), child: const Text('去更新')),
      ],
    ),
  );
}

三、第二部分：萌系搜索功能 ------App 的 "软萌放大镜"🔍

萌系搜索功能就像 App 的软萌放大镜，带点小动效的输入框、粉粉的提示语，用户输入文字的时候，还有小动画跟着动，用起来超治愈～

踩过的小坑：

一开始做搜索的时候，输入文字会频繁触发请求，就像用户每敲一个字就发一次脾气，服务器都要被烦死啦！后来我加了防抖处理，用户停止输入半秒后再请求，既减轻服务器压力，又不会卡顿～还有鸿蒙设备上输入框被键盘挡住的问题，一开始没处理，用户输入到一半就被挡住了，后来用SingleChildScrollView包起来，就再也不会啦～

适配小技巧：

给搜索请求加防抖处理，比如 500 毫秒内不重复请求，减轻服务器压力

搜索框加个小动效，比如聚焦时放大一点，像被戳了一下的软糖

提示语用软萌文案，比如 "没有找到结果哦，换个关键词试试吧～"，拒绝冷冰冰的提示

萌系搜索核心代码

dart 复制代码

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

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

  @override
  State<CuteSearchPage> createState() => _CuteSearchPageState();
}

class _CuteSearchPageState extends State<CuteSearchPage> {
  final TextEditingController _controller = TextEditingController();
  final Dio _dio = Dio();
  List<String> _results = [];
  bool _isLoading = false;

  // 防抖计时器
  late final Debouncer _debouncer;

  @override
  void initState() {
    super.initState();
    _debouncer = Debouncer(const Duration(milliseconds: 500));
  }

  Future<void> _search(String keyword) async {
    if (keyword.isEmpty) {
      setState(() => _results = []);
      return;
    }
    setState(() => _isLoading = true);
    try {
      final response = await _dio.get('https://api.example.com/search?keyword=$keyword');
      setState(() {
        _results = List<String>.from(response.data['list']);
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _results = [];
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('软萌搜索🔍')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // 带点小动效的搜索框
            Focus(
              onFocusChange: (hasFocus) => setState(() {}),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                width: double.infinity,
                height: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Colors.pink[50],
                  boxShadow: [
                    if (FocusScope.of(context).hasFocus)
                      BoxShadow(color: Colors.pink.withOpacity(0.3), blurRadius: 8)
                  ],
                ),
                child: TextField(
                  controller: _controller,
                  onChanged: (value) => _debouncer.run(() => _search(value)),
                  decoration: const InputDecoration(
                    hintText: '搜索你喜欢的内容吧～',
                    border: InputBorder.none,
                    prefixIcon: Icon(Icons.search, color: Colors.pink),
                    contentPadding: EdgeInsets.symmetric(horizontal: 16),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),
            // 搜索结果
            if (_isLoading)
              const CircularProgressIndicator(color: Colors.pink)
            else if (_results.isEmpty && _controller.text.isNotEmpty)
              const Text('没有找到结果哦，换个关键词试试吧～', style: TextStyle(color: Colors.grey))
            else
              Expanded(
                child: ListView.builder(
                  itemCount: _results.length,
                  itemBuilder: (context, index) => ListTile(
                    title: Text(_results[index]),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

// 防抖工具类
class Debouncer {
  final Duration delay;
  Timer? _timer;

  Debouncer(this.delay);

  void run(VoidCallback action) {
    _timer?.cancel();
    _timer = Timer(delay, action);
  }
}

这是我的运行截图：

四、复盘与反思：适配路上的小收获💡

折腾完这两个功能，我也复盘了一下适配过程中的小收获：

更新检测适配：鸿蒙设备的网络请求要注意权限和缓存控制，频繁请求不仅浪费资源，还可能被系统限制，加个 24 小时缓存控制就省心多啦

萌系搜索适配：防抖处理是关键，用户输入文字时频繁请求会让 App 变卡，500 毫秒的防抖既能减轻服务器压力，又不会影响用户体验

通用小感悟：给功能加上软萌的细节文案和小动效，用户体验会好很多，鸿蒙设备对动效的适配也很友好，只要别搞太复杂的效果，简单的缩放、阴影动效都能跑起来～