Flutter与OpenHarmony青花瓷设置页面实现

本文介绍了青花瓷App设置页面的设计与实现，采用分组列表结构组织功能选项。页面分为显示、存储和关于三个主要模块，使用SettingsGroup组件统一管理各组设置项。具体实现了主题切换和缓存管理功能，其中主题设置支持系统级适配，缓存管理提供容量计算和清理功能。跨平台方案在OpenHarmony端使用ArkTS的ListItemGroup实现类似分组效果。整体设计遵循移动端UI规范，通过底部弹窗和对

2501_94669463

419人浏览 · 2025-12-22 23:11:44

2501_94669463 · 2025-12-22 23:11:44 发布

在这里插入图片描述

前言

设置页面是用户自定义应用行为的入口，在青花瓷App中，用户可以在这里调整显示偏好、管理缓存、查看版本信息等。我们将设计一个功能完善且易于使用的设置页面，让用户能够根据自己的需求定制应用体验。

设置页面的设计遵循简洁明了的原则，将相关设置项分组展示，每个设置项都有清晰的说明。这种组织方式帮助用户快速找到需要调整的选项。

设置页面结构

设置页面使用分组列表展示各类设置选项，每组设置有明确的标题。

// lib/screens/settings/settings_screen.dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置')),
      body: ListView(
        children: const [
          SettingsGroup(title: '显示', children: [
            ThemeSettingTile(),
            FontSizeSettingTile(),
          ]),
          SettingsGroup(title: '存储', children: [
            CacheSettingTile(),
            DownloadSettingTile(),
          ]),
          SettingsGroup(title: '关于', children: [
            VersionTile(),
            PrivacyTile(),
          ]),
        ],
      ),
    );
  }
}


设置页面使用`ListView`作为容器，将设置项按功能分组展示。三个主要分组分别是显示设置、存储管理和关于信息。这种分组方式让用户能够快速定位需要调整的设置项，提升了页面的可用性。

## 设置分组组件

设置分组组件为一组相关设置项提供统一的标题和容器样式。

```dart
// lib/screens/settings/widgets/settings_group.dart
class SettingsGroup extends StatelessWidget {
  final String title;
  final List<Widget> children;

  const SettingsGroup({
    super.key,
    required this.title,
    required this.children,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
          child: Text(title,
            style: TextStyle(
              fontSize: 14,
              color: Colors.grey[600],
              fontWeight: FontWeight.w500,
            )),
        ),
        Card(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(children: children),
        ),
      ],
    );
  }
}

分组组件使用Column布局，标题在上方使用灰色小字显示，设置项包裹在Card中形成视觉分组。CrossAxisAlignment.start确保标题左对齐。这种设计参考了iOS和Android系统设置的风格，用户容易理解和操作。

OpenHarmony设置页面

在OpenHarmony端实现设置页面，使用List组件展示设置项。

// ohos/entry/src/main/ets/pages/SettingsPage.ets
@Entry
@Component
struct SettingsPage {
  build() {
    Column() {
      Text('设置')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 16, left: 16, bottom: 16 })
      
      List() {
        ListItemGroup({ header: this.groupHeader('显示') }) {
          ListItem() { ThemeSettingItem() }
          ListItem() { FontSizeSettingItem() }
        }
        ListItemGroup({ header: this.groupHeader('存储') }) {
          ListItem() { CacheSettingItem() }
        }
      }
      .divider({ strokeWidth: 0.5, color: '#EEEEEE' })
    }
    .backgroundColor('#F8F6F0')
  }

  @Builder groupHeader(title: string) {
    Text(title)
      .fontSize(14)
      .fontColor('#999999')
      .padding({ left: 16, top: 12, bottom: 8 })
  }
}

ArkTS的ListItemGroup组件支持分组列表，header参数接受一个Builder函数来构建分组标题。divider属性为列表项添加分隔线。@Builder装饰器定义了可复用的UI构建函数，使代码更加简洁。

主题设置项

主题设置让用户可以切换应用的深色/浅色模式。

// lib/screens/settings/widgets/theme_setting_tile.dart
class ThemeSettingTile extends StatelessWidget {
  const ThemeSettingTile({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: const Icon(Icons.palette, color: PorcelainColors.primaryBlue),
      title: const Text('主题模式'),
      subtitle: const Text('跟随系统'),
      trailing: const Icon(Icons.chevron_right),
      onTap: () {
        showModalBottomSheet(
          context: context,
          builder: (context) => const ThemeSelector(),
        );
      },
    );
  }
}

主题设置项点击后弹出底部选择器，用户可以选择浅色、深色或跟随系统。subtitle显示当前选择的模式。使用showModalBottomSheet展示选择器，这种交互方式在移动端非常常见，用户容易理解。

缓存管理设置

缓存管理让用户可以查看和清理应用缓存，释放存储空间。

// lib/screens/settings/widgets/cache_setting_tile.dart
class CacheSettingTile extends StatefulWidget {
  const CacheSettingTile({super.key});

  @override
  State<CacheSettingTile> createState() => _CacheSettingTileState();
}

class _CacheSettingTileState extends State<CacheSettingTile> {
  String _cacheSize = '计算中...';

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

  Future<void> _calculateCacheSize() async {
    // 计算缓存大小
    setState(() => _cacheSize = '128 MB');
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: const Icon(Icons.storage, color: PorcelainColors.primaryBlue),
      title: const Text('清理缓存'),
      subtitle: Text(_cacheSize),
      onTap: _showClearDialog,
    );
  }

  void _showClearDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('清理缓存'),
        content: const Text('确定要清理所有缓存吗？'),
        actions: [
          TextButton(onPressed: () => Navigator.pop(context), child: const Text('取消')),
          TextButton(onPressed: () {}, child: const Text('确定')),
        ],
      ),
    );
  }
}

缓存设置项显示当前缓存大小，点击后弹出确认对话框。使用StatefulWidget管理缓存大小的计算状态，initState中异步计算缓存大小。AlertDialog提供标准的确认对话框，防止用户误操作。

版本信息展示

版本信息展示应用的当前版本号和更新检查功能。

// lib/screens/settings/widgets/version_tile.dart
class VersionTile extends StatelessWidget {
  const VersionTile({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: const Icon(Icons.info, color: PorcelainColors.primaryBlue),
      title: const Text('版本'),
      subtitle: const Text('1.0.0'),
      trailing: TextButton(
        onPressed: () {},
        child: const Text('检查更新'),
      ),
    );
  }
}