进阶实战 Flutter for OpenHarmony：app_settings 第三方库实战 - 系统设置跳转

在现代移动应用开发中，系统设置跳转是一个非常实用的功能。当用户需要修改某些系统配置（如开启定位、连接 WiFi、授权权限等）时，应用需要能够引导用户快速跳转到对应的系统设置页面。在 Flutter for OpenHarmony 应用开发中，插件正是为此而生的便捷工具。特性说明🔧 系统设置跳转支持打开设备的各种系统设置页面，如 WiFi、定位、蓝牙等📱 应用设置跳转支持打开应用自身的设置页面?

2201_76027234

338人浏览 · 2026-02-21 11:04:03

2201_76027234 · 2026-02-21 11:04:03 发布

在这里插入图片描述

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

🎯 一、组件概述与应用场景

📋 1.1 app_settings 简介

在现代移动应用开发中，系统设置跳转是一个非常实用的功能。当用户需要修改某些系统配置（如开启定位、连接 WiFi、授权权限等）时，应用需要能够引导用户快速跳转到对应的系统设置页面。在 Flutter for OpenHarmony 应用开发中，app_settings 插件正是为此而生的便捷工具。

核心特性：

特性	说明
🔧 系统设置跳转	支持打开设备的各种系统设置页面，如 WiFi、定位、蓝牙等
📱 应用设置跳转	支持打开应用自身的设置页面
🎛️ 设置面板支持	支持打开系统设置面板（如音量、网络等）
🌐 跨平台支持	统一的 API 接口，支持 Android、iOS、macOS 和 OpenHarmony
📋 丰富的设置类型	提供多种设置类型枚举，满足不同场景需求
⚡ 简单易用	一行代码即可实现设置页面跳转

💡 1.2 实际应用场景

权限引导：当应用需要某些权限才能正常工作时，用户可能已经拒绝了权限请求。此时，应用需要引导用户前往系统设置页面手动开启权限。

功能配置：某些应用功能依赖于系统设置。例如，下载功能可能需要用户先连接 WiFi，定位功能需要用户开启定位服务。

问题排查：当应用出现问题时，可能需要用户检查某些系统设置。例如，网络连接失败时，引导用户检查 WiFi 设置。

用户体验优化：通过提供快捷的设置入口，用户无需手动在系统设置中寻找对应的选项，大大提升了用户体验。

合规要求：某些应用审核规范要求应用在权限被拒绝后，必须提供引导用户前往设置页面的入口。

🏗️ 1.3 系统架构设计

┌─────────────────────────────────────────────────────────┐
│                    UI 展示层                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │ 设置入口组件 │  │ 权限引导弹窗 │  │ 设置中心页面 │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│                    业务逻辑层                            │
│  ┌─────────────────────────────────────────────────┐   │
│  │           SettingsService 设置服务               │   │
│  │  • openWifi()  • openLocation()  • openApp()    │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│                    平台适配层                            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │ Android     │  │ iOS         │  │ OpenHarmony │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
└─────────────────────────────────────────────────────────┘

📦 二、项目配置与依赖安装

🔧 2.1 添加依赖配置

打开项目根目录下的 pubspec.yaml 文件，添加以下配置：

dependencies:
  flutter:
    sdk: flutter

  # app_settings - 系统设置跳转插件
  app_settings:
    git:
      url: "https://atomgit.com/openharmony-sig/fluttertpc_app_settings.git"

dev_dependencies:
  # app_settings 鸿蒙平台支持
  app_settings_ohos:
    git:
      url: "https://atomgit.com/openharmony-sig/fluttertpc_app_settings.git"
      path: ./ohos

配置说明：

使用 git 方式引用开源鸿蒙适配的 fluttertpc_app_settings 仓库
app_settings_ohos：鸿蒙平台的原生实现，作为 dev_dependency 引入
本项目基于 app_settings@5.1.1 开发
适配 Flutter 3.27.5-ohos-1.0.4

⚠️ 重要提示：对于 OpenHarmony 平台，必须使用 git 方式引用适配版本，不能直接使用 pub.dev 的版本号。

📥 2.2 下载依赖

配置完成后，在项目根目录执行以下命令：

flutter pub get

📱 2.3 支持的设置类型

设置类型	描述	OpenHarmony 支持
AppSettingsType.wifi	WiFi 设置	✅ yes
AppSettingsType.location	位置设置	✅ yes
AppSettingsType.bluetooth	蓝牙设置	✅ yes
AppSettingsType.notification	通知设置	✅ yes
AppSettingsType.display	显示设置	✅ yes
AppSettingsType.settings	应用设置	✅ yes
AppSettingsType.security	安全设置	✅ yes
AppSettingsType.sound	声音设置	✅ yes
AppSettingsType.batteryOptimization	电池优化设置	✅ yes
AppSettingsType.nfc	NFC 设置	✅ yes
AppSettingsType.vpn	VPN 设置	✅ yes
AppSettingsType.date	日期设置	✅ yes
AppSettingsType.locale	语言设置	⚠️ 部分支持
AppSettingsType.internalStorage	内部存储设置	✅ yes
AppSettingsType.accessibility	无障碍设置	✅ yes

🔧 三、核心功能详解

🎯 3.1 基础跳转方法

使用 AppSettings.openAppSettings 方法打开各种设置页面：

import 'package:app_settings/app_settings.dart';

// 打开 WiFi 设置
AppSettings.openAppSettings(type: AppSettingsType.wifi);

// 打开定位设置
AppSettings.openAppSettings(type: AppSettingsType.location);

// 打开蓝牙设置
AppSettings.openAppSettings(type: AppSettingsType.bluetooth);

// 打开通知设置
AppSettings.openAppSettings(type: AppSettingsType.notification);

// 打开应用设置
AppSettings.openAppSettings(type: AppSettingsType.settings);

🎛️ 3.2 设置面板

设置面板是一种轻量级的设置界面，允许用户在不离开当前应用的情况下快速调整某些设置：

// 打开音量设置面板
AppSettings.openAppSettingsPanel(AppSettingsPanelType.volume);

// 打开网络设置面板
AppSettings.openAppSettingsPanel(AppSettingsPanelType.internetConnectivity);

// 打开 WiFi 面板
AppSettings.openAppSettingsPanel(AppSettingsPanelType.wifi);

// 打开 NFC 面板
AppSettings.openAppSettingsPanel(AppSettingsPanelType.nfc);

🔐 3.3 结合权限检查使用

app_settings 最常见的使用场景是与权限检查结合：

Future<void> checkAndRequestPermission() async {
  final status = await Permission.location.status;
  
  if (status.isDenied) {
    final result = await Permission.location.request();
    if (result.isPermanentlyDenied) {
      _showPermissionDialog();
    }
  } else if (status.isPermanentlyDenied) {
    _showPermissionDialog();
  } else if (status.isGranted) {
    _startLocationService();
  }
}

void _showPermissionDialog() {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('需要定位权限'),
      content: const Text('请在设置中开启定位权限以使用此功能'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('取消'),
        ),
        TextButton(
          onPressed: () {
            Navigator.pop(context);
            AppSettings.openAppSettings(type: AppSettingsType.location);
          },
          child: const Text('去设置'),
        ),
      ],
    ),
  );
}

📝 四、完整示例代码

下面是一个完整的智能系统设置跳转系统示例：

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

void main() {
  runApp(const AppSettingsDemo());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '智能设置跳转系统',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainPage(),
    );
  }
}

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    const QuickSettingsPage(),
    const SettingsCenterPage(),
    const PermissionGuidePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: NavigationBar(
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) {
          setState(() => _currentIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.flash_on), label: '快捷设置'),
          NavigationDestination(icon: Icon(Icons.settings), label: '设置中心'),
          NavigationDestination(icon: Icon(Icons.privacy_tip), label: '权限引导'),
        ],
      ),
    );
  }
}

// ============ 快捷设置页面 ============

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('快捷设置'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSectionTitle('网络设置'),
            _buildQuickSettingsGrid([
              QuickSettingItem(
                icon: Icons.wifi,
                title: 'WiFi',
                color: Colors.blue,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.wifi),
              ),
              QuickSettingItem(
                icon: Icons.bluetooth,
                title: '蓝牙',
                color: Colors.indigo,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.bluetooth),
              ),
              QuickSettingItem(
                icon: Icons.vpn_key,
                title: 'VPN',
                color: Colors.purple,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.vpn),
              ),
              QuickSettingItem(
                icon: Icons.nfc,
                title: 'NFC',
                color: Colors.teal,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.nfc),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSectionTitle('设备设置'),
            _buildQuickSettingsGrid([
              QuickSettingItem(
                icon: Icons.location_on,
                title: '定位',
                color: Colors.green,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.location),
              ),
              QuickSettingItem(
                icon: Icons.notifications,
                title: '通知',
                color: Colors.orange,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.notification),
              ),
              QuickSettingItem(
                icon: Icons.volume_up,
                title: '声音',
                color: Colors.red,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.sound),
              ),
              QuickSettingItem(
                icon: Icons.brightness_6,
                title: '显示',
                color: Colors.amber,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.display),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSectionTitle('系统设置'),
            _buildQuickSettingsGrid([
              QuickSettingItem(
                icon: Icons.security,
                title: '安全',
                color: Colors.grey,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.security),
              ),
              QuickSettingItem(
                icon: Icons.date_range,
                title: '日期',
                color: Colors.cyan,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.date),
              ),
              QuickSettingItem(
                icon: Icons.language,
                title: '语言',
                color: Colors.pink,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.settings),
              ),
              QuickSettingItem(
                icon: Icons.accessibility,
                title: '无障碍',
                color: Colors.lime,
                onTap: () => AppSettings.openAppSettings(type: AppSettingsType.accessibility),
              ),
            ]),
          ],
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  Widget _buildQuickSettingsGrid(List<QuickSettingItem> items) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        crossAxisSpacing: 12,
        mainAxisSpacing: 12,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return _buildQuickSettingCard(item);
      },
    );
  }

  Widget _buildQuickSettingCard(QuickSettingItem item) {
    return InkWell(
      onTap: item.onTap,
      borderRadius: BorderRadius.circular(12),
      child: Container(
        decoration: BoxDecoration(
          color: item.color.withOpacity(0.1),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: item.color.withOpacity(0.3)),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(item.icon, color: item.color, size: 28),
            const SizedBox(height: 8),
            Text(
              item.title,
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w500,
                color: item.color,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class QuickSettingItem {
  final IconData icon;
  final String title;
  final Color color;
  final VoidCallback onTap;

  QuickSettingItem({
    required this.icon,
    required this.title,
    required this.color,
    required this.onTap,
  });
}

// ============ 设置中心页面 ============

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('设置中心'),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          _buildSettingsGroup('网络与连接', [
            SettingsItem(
              icon: Icons.wifi,
              title: 'WiFi 设置',
              subtitle: '管理无线网络连接',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.wifi),
            ),
            SettingsItem(
              icon: Icons.bluetooth,
              title: '蓝牙设置',
              subtitle: '管理蓝牙设备连接',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.bluetooth),
            ),
            SettingsItem(
              icon: Icons.vpn_key,
              title: 'VPN 设置',
              subtitle: '管理虚拟专用网络',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.vpn),
            ),
            SettingsItem(
              icon: Icons.nfc,
              title: 'NFC 设置',
              subtitle: '管理近场通信功能',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.nfc),
            ),
          ]),
          _buildSettingsGroup('设备管理', [
            SettingsItem(
              icon: Icons.location_on,
              title: '定位服务',
              subtitle: '管理位置服务和权限',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.location),
            ),
            SettingsItem(
              icon: Icons.notifications,
              title: '通知管理',
              subtitle: '管理应用通知权限',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.notification),
            ),
            SettingsItem(
              icon: Icons.volume_up,
              title: '声音与振动',
              subtitle: '调整铃声和振动设置',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.sound),
            ),
            SettingsItem(
              icon: Icons.brightness_6,
              title: '显示设置',
              subtitle: '调整亮度和显示模式',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.display),
            ),
          ]),
          _buildSettingsGroup('系统设置', [
            SettingsItem(
              icon: Icons.security,
              title: '安全与隐私',
              subtitle: '管理安全设置',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.security),
            ),
            SettingsItem(
              icon: Icons.date_range,
              title: '日期与时间',
              subtitle: '设置日期、时间和时区',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.date),
            ),
            SettingsItem(
              icon: Icons.language,
              title: '语言与输入',
              subtitle: '设置系统语言',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.settings),
            ),
            SettingsItem(
              icon: Icons.apps,
              title: '应用信息',
              subtitle: '查看应用详情和权限',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.settings),
            ),
          ]),
          _buildSettingsGroup('存储与电池', [
            SettingsItem(
              icon: Icons.storage,
              title: '内部存储',
              subtitle: '管理设备存储空间',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.internalStorage),
            ),
            SettingsItem(
              icon: Icons.battery_charging_full,
              title: '电池优化',
              subtitle: '管理电池使用',
              onTap: () => AppSettings.openAppSettings(type: AppSettingsType.batteryOptimization),
            ),
          ]),
        ],
      ),
    );
  }

  Widget _buildSettingsGroup(String title, List<SettingsItem> items) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 20, 16, 8),
          child: Text(
            title,
            style: TextStyle(
              color: Colors.grey.shade600,
              fontSize: 13,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
        ...items.map((item) => _buildSettingsTile(item)),
      ],
    );
  }

  Widget _buildSettingsTile(SettingsItem item) {
    return ListTile(
      leading: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          color: Colors.deepPurple.withOpacity(0.1),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Icon(item.icon, color: Colors.deepPurple),
      ),
      title: Text(item.title),
      subtitle: Text(
        item.subtitle,
        style: TextStyle(color: Colors.grey.shade600, fontSize: 13),
      ),
      trailing: const Icon(Icons.chevron_right),
      onTap: item.onTap,
    );
  }
}

class SettingsItem {
  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;

  SettingsItem({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
  });
}

// ============ 权限引导页面 ============

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('权限引导'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildInfoCard(),
            const SizedBox(height: 24),
            _buildSectionTitle('常见权限问题'),
            _buildPermissionGuideCard(
              title: '定位权限被拒绝',
              description: '应用需要定位权限才能提供位置相关服务',
              icon: Icons.location_on,
              color: Colors.green,
              settingType: AppSettingsType.location,
            ),
            _buildPermissionGuideCard(
              title: '相机权限被拒绝',
              description: '应用需要相机权限才能拍照和扫码',
              icon: Icons.camera_alt,
              color: Colors.blue,
              settingType: AppSettingsType.settings,
            ),
            _buildPermissionGuideCard(
              title: '通知权限被拒绝',
              description: '应用需要通知权限才能发送消息提醒',
              icon: Icons.notifications,
              color: Colors.orange,
              settingType: AppSettingsType.notification,
            ),
            _buildPermissionGuideCard(
              title: '存储权限被拒绝',
              description: '应用需要存储权限才能保存文件',
              icon: Icons.folder,
              color: Colors.purple,
              settingType: AppSettingsType.internalStorage,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildInfoCard() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.deepPurple.shade400, Colors.deepPurple.shade600],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(Icons.info_outline, color: Colors.white),
              SizedBox(width: 8),
              Text(
                '权限引导说明',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          SizedBox(height: 12),
          Text(
            '当应用权限被拒绝时，您可以通过以下引导帮助用户前往系统设置页面开启权限。点击下方卡片可快速跳转到对应的设置页面。',
            style: TextStyle(color: Colors.white70, height: 1.5),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  Widget _buildPermissionGuideCard({
    required String title,
    required String description,
    required IconData icon,
    required Color color,
    required AppSettingsType settingType,
  }) {
    return Builder(
      builder: (context) {
        return Card(
          margin: const EdgeInsets.only(bottom: 12),
          child: InkWell(
            onTap: () {
              _showPermissionGuideDialog(context, title, description, settingType);
            },
            borderRadius: BorderRadius.circular(12),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Container(
                    width: 48,
                    height: 48,
                    decoration: BoxDecoration(
                      color: color.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Icon(icon, color: color),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          title,
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        const SizedBox(height: 4),
                        Text(
                          description,
                          style: TextStyle(
                            fontSize: 13,
                            color: Colors.grey.shade600,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Icon(Icons.chevron_right, color: Colors.grey.shade400),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  void _showPermissionGuideDialog(
    BuildContext context,
    String title,
    String description,
    AppSettingsType settingType,
  ) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(title),
        content: Text(description),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              AppSettings.openAppSettings(type: settingType);
            },
            child: const Text('前往设置'),
          ),
        ],
      ),
    );
  }
}