设置页面是App的配置中心，用户可以在这里调整各种偏好设置，比如阅读提醒、显示模式、数据管理等。这个页面的设计要清晰分类，让用户能快速找到想要的设置项。

做这个页面的时候，我把设置项按功能分组，每组有一个标题，这样结构更清晰。

状态管理

设置页面有一些开关状态需要管理，用 StatefulWidget 实现。

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

导入必要的依赖包。

状态变量定义

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});
  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  bool _dailyReminder = true;
  bool _darkMode = false;
  bool _autoBackup = true;

三个开关状态：每日提醒、深色模式、自动备份。

页面主体结构

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFDF8F3),
      appBar: AppBar(
        title: const Text('设置'),
        backgroundColor: const Color(0xFF5B4636),
        foregroundColor: Colors.white,
      ),

标准的页面结构。

页面内容布局

      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            _buildSection('阅读提醒', [
              _buildSwitch('每日阅读提醒', '提醒你完成每日阅读目标', _dailyReminder, (v) => setState(() => _dailyReminder = v)),
              _buildTile('提醒时间', '21:00', () {}),
            ]),
            SizedBox(height: 16.h),
            _buildSection('显示设置', [
              _buildSwitch('深色模式', '使用深色主题', _darkMode, (v) => setState(() => _darkMode = v)),
              _buildTile('字体大小', '标准', () {}),
            ]),
            SizedBox(height: 16.h),
            _buildSection('数据设置', [
              _buildSwitch('自动备份', '每周自动备份数据', _autoBackup, (v) => setState(() => _autoBackup = v)),
              _buildTile('清除缓存', '释放存储空间', () => _showClearCacheDialog()),
              _buildTile('导出数据', '导出所有阅读记录', () => Get.snackbar('提示', '数据导出中...')),
            ]),
            SizedBox(height: 16.h),
            _buildSection('账户', [
              _buildTile('修改密码', '更改登录密码', () {}),
              _buildTile('退出登录', '退出当前账户', () => _showLogoutDialog(), isDestructive: true),
            ]),
          ],
        ),
      ),
    );
  }

设置项分四组：阅读提醒、显示设置、数据设置、账户。

设置分组组件

  Widget _buildSection(String title, List<Widget> children) {
    return Container(
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.bold,
            color: const Color(0xFF3D2914),
          )),
          SizedBox(height: 12.h),
          ...children,
        ],
      ),
    );
  }

每个分组是一个白色卡片，有标题和设置项列表。

开关设置项

  Widget _buildSwitch(String title, String subtitle, bool value, Function(bool) onChanged) {
    return Padding(
      padding: EdgeInsets.only(bottom: 12.h),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title, style: TextStyle(fontSize: 14.sp)),
                Text(subtitle, style: TextStyle(
                  color: Colors.grey[500],
                  fontSize: 12.sp,
                )),
              ],
            ),
          ),
          Switch(
            value: value,
            onChanged: onChanged,
            activeColor: const Color(0xFF5B4636),
          ),
        ],
      ),
    );
  }

开关设置项有标题、副标题、开关。开关用主题色。

普通设置项

  Widget _buildTile(String title, String value, VoidCallback onTap, {bool isDestructive = false}) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 12.h),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 14.sp,
                color: isDestructive ? Colors.red : null,
              ),
            ),
            Row(
              children: [
                Text(
                  value,
                  style: TextStyle(color: Colors.grey[500], fontSize: 13.sp),
                ),
                SizedBox(width: 4.w),
                Icon(Icons.chevron_right, color: Colors.grey[400], size: 20.sp),
              ],
            ),
          ],
        ),
      ),
    );
  }

普通设置项有标题、当前值、箭头。isDestructive 参数用于危险操作，文字会变红色。

清除缓存对话框

  void _showClearCacheDialog() {
    Get.dialog(AlertDialog(
      title: const Text('清除缓存'),
      content: const Text('确定要清除所有缓存数据吗？'),
      actions: [
        TextButton(onPressed: () => Get.back(), child: const Text('取消')),
        TextButton(
          onPressed: () {
            Get.back();
            Get.snackbar('成功', '缓存已清除');
          },
          child: const Text('确定'),
        ),
      ],
    ));
  }

清除缓存前确认，防止误操作。

退出登录对话框

  void _showLogoutDialog() {
    Get.dialog(AlertDialog(
      title: const Text('退出登录'),
      content: const Text('确定要退出当前账户吗？'),
      actions: [
        TextButton(onPressed: () => Get.back(), child: const Text('取消')),
        TextButton(
          onPressed: () {
            Get.back();
            Get.snackbar('已退出', '您已退出登录');
          },
          child: const Text('退出', style: TextStyle(color: Colors.red)),
        ),
      ],
    ));
  }
}

退出登录是危险操作，确认按钮用红色。

设置项分类

设置项按功能分类：

阅读提醒：每日提醒开关、提醒时间。

显示设置：深色模式、字体大小。

数据设置：自动备份、清除缓存、导出数据。

账户：修改密码、退出登录。

设置持久化

设置项的值需要持久化存储，可以用 shared_preferences 或其他本地存储方案。每次修改设置后保存，下次打开App读取。

深色模式实现

深色模式的实现需要：

定义深色主题的颜色方案。

根据设置切换主题。

保存用户的主题偏好。

小结

设置页面通过分组的方式组织设置项，让用户能快速找到想要的设置。开关设置项和普通设置项用不同的组件实现。

危险操作用红色提示，并且有确认对话框。设置项的值需要持久化存储。

下一篇会讲个人中心页面的实现，作为用户的个人主页和功能入口。

---

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