Flutter for OpenHarmony 二维码扫描App实战 - 关于实现

关于页面是每个应用都应该有的标配功能，它展示应用的基本信息、版本号、功能特点和版权声明。虽然这个页面的功能相对简单，但它是用户了解应用的重要窗口，也是展示品牌形象的机会。这篇文章详细介绍关于页面的实现，包括应用图标展示、版本信息、功能特点列表和版权信息的布局设计。

关于页面的设计思路

在设计关于页面之前，我参考了很多优秀应用的关于页面，总结出几个共同的设计要素：

应用图标和名称：页面顶部通常会展示应用的图标和名称，这是用户对应用的第一印象。图标要足够大，让用户能清楚地看到；名称要醒目，使用较大的字号和粗体。

版本信息：版本号是用户判断应用是否需要更新的重要依据，也是反馈问题时的必要信息。版本号通常放在应用名称下方，使用较小的字号和灰色，不抢主角的风头。

功能特点：列出应用的核心功能和特点，让用户了解应用能做什么。这部分可以用图标加文字的形式展示，更加直观。

版权信息：版权声明是法律要求，也是对开发者劳动成果的保护。通常放在页面底部，使用小字号和灰色。

文件结构和依赖导入

关于页面的代码位于 lib/app/modules/settings/about_view.dart，先来看文件开头的导入部分：

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

这个页面只需要两个导入。flutter/material.dart 提供了所有需要的 UI 组件，包括 Scaffold、AppBar、Container、Column、Text、Card 等。flutter_screenutil 用于屏幕适配，确保页面在不同尺寸的设备上都能正确显示。

和其他设置页面不同，关于页面不需要导入 GetX，因为它只是展示静态信息，不涉及状态管理。这种简单的页面使用纯 Flutter 组件就足够了，不需要引入额外的框架。

AboutView 类的定义

接下来是页面类的定义：

class AboutView extends StatelessWidget {
  const AboutView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('关于')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            SizedBox(height: 32.h),

AboutView 继承自 StatelessWidget，因为页面内容是静态的，不需要维护状态。使用 const 构造函数可以让 Flutter 在编译时创建这个组件，提高性能。

Scaffold 提供了页面的基础结构，appBar 设置标题为"关于"。body 使用 SingleChildScrollView 包裹，这样当内容超出屏幕时可以滚动。虽然关于页面的内容通常不会很长，但在小屏幕设备上可能需要滚动，所以加上滚动支持是个好习惯。

padding 设置为 16.w，给内容四周留出边距。Column 用于垂直排列所有内容。开头的 SizedBox(height: 32.h) 在顶部添加一些空白，让应用图标不会紧贴着 AppBar。

应用图标的展示

页面顶部展示应用图标：

            // App图标
            Container(
              width: 100.w,
              height: 100.w,
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.circular(20.r),
              ),
              child: Icon(Icons.qr_code_scanner, size: 60.sp, color: Colors.white),
            ),

应用图标使用 Container 组件来创建，宽高都是 100.w，形成一个正方形。使用 .w 单位可以让图标大小根据屏幕宽度自适应，在大屏设备上会稍大一些，在小屏设备上会稍小一些。

BoxDecoration 设置了容器的装饰效果。color 使用主题的 primaryColor，这样图标背景色会和应用的整体风格保持一致。borderRadius 设置为 20.r，形成圆角矩形的效果，这是现代应用图标的常见样式。

内部的 Icon 使用 Icons.qr_code_scanner，这是 Material Icons 中的二维码扫描图标，非常符合我们应用的功能。图标大小 60.sp，颜色白色，在主题色背景上非常醒目。

在实际项目中，这里应该使用应用的真实图标图片，可以用 Image.asset 加载本地图片资源。

应用名称和版本号

图标下方是应用名称和版本号：

            SizedBox(height: 16.h),
            Text(
              'QR Scanner',
              style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8.h),
            Text(
              '版本 2.1.3',
              style: TextStyle(fontSize: 14.sp, color: Colors.grey),
            ),
            SizedBox(height: 32.h),

SizedBox(height: 16.h) 在图标和名称之间添加间距。应用名称 "QR Scanner" 使用 24.sp 的大字号和粗体，非常醒目。这个名称应该和应用在应用商店中的名称保持一致。

版本号 "版本 2.1.3" 使用较小的 14.sp 字号和灰色，作为辅助信息展示。版本号的格式是语义化版本（Semantic Versioning），2 是主版本号，1 是次版本号，3 是修订版本号。

在实际项目中，版本号应该从 pubspec.yaml 中读取，而不是硬编码。可以使用 package_info_plus 插件来获取应用的版本信息：

final packageInfo = await PackageInfo.fromPlatform();
final version = packageInfo.version; // 如 "2.1.3"
final buildNumber = packageInfo.buildNumber; // 如 "2010133"

功能特点卡片

接下来是功能特点的展示：

            // 功能特点
            Card(
              child: Padding(
                padding: EdgeInsets.all(16.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '功能特点',
                      style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600),
                    ),
                    SizedBox(height: 12.h),

功能特点使用 Card 组件包裹，给内容添加圆角和阴影效果，让这部分内容在视觉上和其他部分区分开。Card 内部使用 Padding 添加 16.w 的内边距。

Column 用于垂直排列标题和各个功能项。crossAxisAlignment: CrossAxisAlignment.start 让内容左对齐。标题 "功能特点" 使用 16.sp 字号和 w600 半粗体，比正文稍大一些，起到标题的作用。

功能项列表

功能特点列表使用自定义的 _FeatureItem 组件：

                    _FeatureItem(icon: Icons.flash_on, text: '快速扫描'),
                    _FeatureItem(icon: Icons.qr_code, text: '自定义二维码生成'),
                    _FeatureItem(icon: Icons.block, text: '无广告'),
                    _FeatureItem(icon: Icons.shield, text: '注重隐私保护'),
                    _FeatureItem(icon: Icons.phone_android, text: '鸿蒙系统适配'),
                  ],
                ),
              ),
            ),

每个功能项都是一个 _FeatureItem 组件，包含图标和文字。这五个功能特点分别是：

• 快速扫描：使用闪电图标，强调扫描速度快
• 自定义二维码生成：使用二维码图标，说明支持生成功能
• 无广告：使用禁止图标，这是很多用户关心的点
• 注重隐私保护：使用盾牌图标，强调数据安全
• 鸿蒙系统适配：使用手机图标，说明支持 OpenHarmony 平台

这些功能特点是应用的卖点，应该突出展示。选择的图标要能直观地表达功能含义，让用户一眼就能理解。

版权信息

页面底部是版权信息：

            SizedBox(height: 16.h),
            // 版权信息
            Text(
              '© 2024 QR Scanner Team',
              style: TextStyle(fontSize: 12.sp, color: Colors.grey),
            ),
            SizedBox(height: 8.h),
            Text(
              '保留所有权利',
              style: TextStyle(fontSize: 12.sp, color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

版权信息使用较小的 12.sp 字号和灰色，不会太抢眼但能起到法律声明的作用。"© 2024 QR Scanner Team" 是标准的版权声明格式，© 是版权符号，2024 是年份，QR Scanner Team 是版权所有者。

"保留所有权利" 是常见的版权声明用语，表示版权所有者保留所有法律权利。在实际项目中，可能还需要添加更详细的法律声明，或者链接到完整的服务条款和隐私政策。

_FeatureItem 组件的实现

_FeatureItem 是一个私有组件，用于展示单个功能项：

class _FeatureItem extends StatelessWidget {
  final IconData icon;
  final String text;

  const _FeatureItem({required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 6.h),
      child: Row(
        children: [
          Icon(icon, size: 20.sp, color: Theme.of(context).primaryColor),
          SizedBox(width: 12.w),
          Text(text, style: TextStyle(fontSize: 14.sp)),
        ],
      ),
    );
  }
}

_FeatureItem 接收两个必需参数：icon 是图标数据，text 是功能描述文字。使用下划线前缀表示这是一个私有类，只在当前文件中使用。

Padding 在每个功能项的上下添加 6.h 的间距，让各项之间有适当的分隔。Row 让图标和文字水平排列。

图标大小 20.sp，颜色使用主题的 primaryColor，和应用图标的背景色保持一致。SizedBox(width: 12.w) 在图标和文字之间添加间距。文字使用 14.sp 的标准正文字号。

这种组件封装的方式让代码更简洁，如果需要修改功能项的样式，只需要改 _FeatureItem 一处就能影响所有功能项。

添加更多信息

关于页面还可以添加更多有用的信息，比如开发者信息、联系方式、开源协议等：

SizedBox(height: 16.h),
Card(
  child: Column(
    children: [
      ListTile(
        leading: const Icon(Icons.email),
        title: const Text('联系我们'),
        subtitle: const Text('support@qrscanner.com'),
        onTap: () => _launchEmail('support@qrscanner.com'),
      ),
      const Divider(height: 1),
      ListTile(
        leading: const Icon(Icons.language),
        title: const Text('官方网站'),
        subtitle: const Text('www.qrscanner.com'),
        onTap: () => _launchUrl('https://www.qrscanner.com'),
      ),
      const Divider(height: 1),
      ListTile(
        leading: const Icon(Icons.code),
        title: const Text('开源协议'),
        subtitle: const Text('MIT License'),
        onTap: () => _showLicenseDialog(context),
      ),
    ],
  ),
),

这个卡片包含三个可点击的列表项：联系邮箱、官方网站和开源协议。使用 ListTile 组件可以快速创建标准的列表项布局，包含图标、标题和副标题。

点击联系邮箱会打开邮件应用，点击官方网站会打开浏览器，点击开源协议会显示协议详情对话框。这些交互让关于页面不只是静态展示，还能提供实用的功能。

打开外部链接

实现打开邮件和网页的功能：

import 'package:url_launcher/url_launcher.dart';

Future<void> _launchEmail(String email) async {
  final uri = Uri.parse('mailto:$email');
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri);
  }
}

Future<void> _launchUrl(String url) async {
  final uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  }
}

url_launcher 是 Flutter 官方提供的插件，用于打开 URL、发送邮件、拨打电话等。mailto: 前缀会打开系统的邮件应用，https:// 前缀会打开浏览器。

canLaunchUrl 检查设备是否能处理这个 URL，launchUrl 执行实际的打开操作。LaunchMode.externalApplication 表示在外部应用中打开，而不是在应用内嵌的 WebView 中。

显示开源协议

显示开源协议的对话框：

void _showLicenseDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('开源协议'),
      content: SingleChildScrollView(
        child: Text(
          '''MIT License

Copyright (c) 2024 QR Scanner Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.''',
          style: TextStyle(fontSize: 12.sp),
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('关闭'),
        ),
      ],
    ),
  );
}

AlertDialog 用于显示对话框，title 是标题，content 是内容，actions 是底部按钮。content 使用 SingleChildScrollView 包裹，因为协议文本可能很长，需要滚动查看。

MIT License 是一种宽松的开源协议，允许任何人免费使用、修改和分发软件，只需要保留版权声明。如果你的应用使用了其他开源协议，需要相应修改这里的内容。

检查更新功能

关于页面还可以添加检查更新功能：

ListTile(
  leading: const Icon(Icons.system_update),
  title: const Text('检查更新'),
  subtitle: const Text('当前版本 2.1.3'),
  trailing: const Icon(Icons.chevron_right),
  onTap: () => _checkUpdate(context),
),

Future<void> _checkUpdate(BuildContext context) async {
  // 显示加载对话框
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => const AlertDialog(
      content: Row(
        children: [
          CircularProgressIndicator(),
          SizedBox(width: 16),
          Text('正在检查更新...'),
        ],
      ),
    ),
  );
  
  // 模拟网络请求
  await Future.delayed(const Duration(seconds: 2));
  
  // 关闭加载对话框
  Navigator.pop(context);
  
  // 显示结果
  Get.snackbar('提示', '当前已是最新版本',
      snackPosition: SnackPosition.BOTTOM);
}

检查更新功能会向服务器请求最新版本信息，然后和当前版本比较。如果有新版本，可以引导用户去应用商店下载更新。这里使用 Future.delayed 模拟网络请求的延迟。

在实际项目中，需要实现真正的版本检查逻辑，包括请求服务器 API、解析响应、比较版本号等。如果有新版本，可以显示更新日志并提供下载链接。

分享应用功能

添加分享应用功能，让用户可以推荐给朋友：

ListTile(
  leading: const Icon(Icons.share),
  title: const Text('分享应用'),
  subtitle: const Text('推荐给朋友'),
  trailing: const Icon(Icons.chevron_right),
  onTap: () => _shareApp(),
),

void _shareApp() {
  Share.share(
    '推荐一款好用的二维码扫描器：QR Scanner\n'
    '快速扫描、自定义生成、无广告、注重隐私\n'
    '下载地址：https://www.qrscanner.com/download',
    subject: 'QR Scanner - 二维码扫描器',
  );
}

Share.share 是 share_plus 插件提供的方法，会调用系统的分享面板，用户可以选择分享到微信、QQ、短信等应用。分享内容包括应用介绍和下载链接。

分享功能是应用推广的重要渠道，用户的口碑推荐比广告更有效。在分享内容中突出应用的核心卖点，能提高转化率。

评分功能

引导用户去应用商店评分：

ListTile(
  leading: const Icon(Icons.star),
  title: const Text('给我们评分'),
  subtitle: const Text('您的支持是我们前进的动力'),
  trailing: const Icon(Icons.chevron_right),
  onTap: () => _rateApp(),
),

Future<void> _rateApp() async {
  // 打开应用商店的应用页面
  final uri = Uri.parse('market://details?id=com.example.qrscanner');
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri);
  } else {
    // 如果无法打开应用商店，打开网页版
    final webUri = Uri.parse('https://play.google.com/store/apps/details?id=com.example.qrscanner');
    await launchUrl(webUri, mode: LaunchMode.externalApplication);
  }
}

market:// 协议会打开设备上的应用商店，直接跳转到应用的详情页面。如果设备上没有安装应用商店，会回退到网页版。

好评对应用的排名和曝光有很大影响，适当引导用户评分是必要的。但要注意不要过于频繁地弹出评分请求，会引起用户反感。

动态获取版本信息

使用 package_info_plus 插件动态获取版本信息：

import 'package:package_info_plus/package_info_plus.dart';

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

  @override
  State<AboutView> createState() => _AboutViewState();
}

class _AboutViewState extends State<AboutView> {
  String _version = '';
  String _buildNumber = '';

  @override
  void initState() {
    super.initState();
    _loadPackageInfo();
  }

  Future<void> _loadPackageInfo() async {
    final packageInfo = await PackageInfo.fromPlatform();
    setState(() {
      _version = packageInfo.version;
      _buildNumber = packageInfo.buildNumber;
    });
  }

这里把 StatelessWidget 改成了 StatefulWidget ，因为需要在 initState 中异步加载版本信息。PackageInfo.fromPlatform() 会读取 pubspec.yaml 中定义的版本号和构建号。

加载完成后调用 setState 更新 UI，版本号就会显示在页面上。这样修改版本号时只需要改 pubspec.yaml，不需要修改代码。

开发者信息展示

可以加一个开发者信息区域：

Card(
  child: Padding(
    padding: EdgeInsets.all(16.w),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('开发团队', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600)),
        SizedBox(height: 12.h),
        Row(
          children: [
            CircleAvatar(
              radius: 24.r,
              backgroundImage: const AssetImage('assets/images/team_logo.png'),
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('OpenHarmony跨平台团队', style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w500)),
                  SizedBox(height: 4.h),
                  Text('专注于Flutter跨平台开发', style: TextStyle(fontSize: 12.sp, color: Colors.grey)),
                ],
              ),
            ),
          ],
        ),
        SizedBox(height: 12.h),
        Wrap(
          spacing: 8.w,
          children: [
            ActionChip(
              avatar: const Icon(Icons.language, size: 16),
              label: const Text('官网'),
              onPressed: () => _launchUrl('https://openharmonycrossplatform.csdn.net'),
            ),
            ActionChip(
              avatar: const Icon(Icons.code, size: 16),
              label: const Text('GitHub'),
              onPressed: () => _launchUrl('https://github.com/example'),
            ),
          ],
        ),
      ],
    ),
  ),
),

展示开发团队的信息，包括团队名称、简介、官网和代码仓库链接。

更新日志展示

可以展示应用的更新历史：

ExpansionTile(
  title: const Text('更新日志'),
  leading: const Icon(Icons.update),
  children: [
    _buildChangelogItem('1.2.0', '2024-01-15', [
      '新增批量扫描功能',
      '优化扫描速度',
      '修复已知问题',
    ]),
    _buildChangelogItem('1.1.0', '2024-01-01', [
      '新增二维码样式自定义',
      '支持更多二维码类型',
      '界面优化',
    ]),
    _buildChangelogItem('1.0.0', '2023-12-15', [
      '首次发布',
      '支持扫描和生成二维码',
      '历史记录管理',
    ]),
  ],
),

Widget _buildChangelogItem(String version, String date, List<String> changes) {
  return Padding(
    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text('v$version', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 14.sp)),
            SizedBox(width: 8.w),
            Text(date, style: TextStyle(color: Colors.grey, fontSize: 12.sp)),
          ],
        ),
        SizedBox(height: 4.h),
        ...changes.map((c) => Padding(
          padding: EdgeInsets.only(left: 8.w, top: 2.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('• ', style: TextStyle(color: Colors.grey)),
              Expanded(child: Text(c, style: TextStyle(fontSize: 13.sp))),
            ],
          ),
        )),
        const Divider(),
      ],
    ),
  );
}

更新日志让用户了解应用的发展历程和新功能。

开源许可证展示

如果应用使用了开源库，应该展示许可证信息：

ListTile(
  leading: const Icon(Icons.description),
  title: const Text('开源许可证'),
  trailing: const Icon(Icons.chevron_right),
  onTap: () => showLicensePage(
    context: context,
    applicationName: 'QR Scanner',
    applicationVersion: _version,
    applicationIcon: Padding(
      padding: EdgeInsets.all(8.w),
      child: Image.asset('assets/images/app_icon.png', width: 48.w),
    ),
  ),
),

Flutter提供了showLicensePage方法，自动收集并展示所有依赖库的许可证信息。

调试信息展示

开发阶段可以加一个调试信息区域：

if (kDebugMode)
  Card(
    color: Colors.orange[50],
    child: Padding(
      padding: EdgeInsets.all(16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('调试信息', style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w600)),
          SizedBox(height: 8.h),
          Text('设备: ${Platform.operatingSystem} ${Platform.operatingSystemVersion}'),
          Text('Dart版本: ${Platform.version}'),
          Text('构建模式: Debug'),
          SizedBox(height: 8.h),
          ElevatedButton(
            onPressed: () {
              // 清除所有数据，用于测试
              Get.find<QrHistoryService>().clearAllHistory();
              Get.snackbar('调试', '已清除所有数据');
            },
            child: const Text('清除测试数据'),
          ),
        ],
      ),
    ),
  ),

调试信息只在Debug模式下显示，方便开发测试。

应用统计信息

可以展示一些应用使用统计：

Card(
  child: Padding(
    padding: EdgeInsets.all(16.w),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('使用统计', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600)),
        SizedBox(height: 12.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildStatItem('扫描次数', '${_getTotalScans()}'),
            _buildStatItem('生成次数', '${_getTotalGenerates()}'),
            _buildStatItem('使用天数', '${_getUsageDays()}'),
          ],
        ),
      ],
    ),
  ),
),

Widget _buildStatItem(String label, String value) {
  return Column(
    children: [
      Text(value, style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold, color: Theme.of(context).primaryColor)),
      SizedBox(height: 4.h),
      Text(label, style: TextStyle(fontSize: 12.sp, color: Colors.grey)),
    ],
  );
}

展示用户的使用统计，增加用户粘性。

小结

这篇文章详细介绍了关于页面的实现。从设计思路开始，介绍了应用图标、版本信息、功能特点、版权声明等核心元素的布局和实现。

关于页面虽然功能简单，但它是用户了解应用的重要窗口。好的关于页面应该信息完整、布局美观、交互友好。除了基本的展示功能，还可以添加联系方式、检查更新、分享应用、评分等实用功能，提升用户体验和应用推广效果。

扩展功能方面，开发者信息、更新日志、开源许可证、调试信息、使用统计都能让关于页面更加丰富和实用。

通过封装 _FeatureItem 组件，我们实现了功能特点列表的复用，代码更简洁也更容易维护。使用 package_info_plus 插件动态获取版本信息，避免了硬编码带来的维护问题。

---

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