generated from dellevin/template
适配深色模式
This commit is contained in:
DelLevin-Home
@@ -8,95 +8,163 @@ class CloudSyncPage extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF8F8F8),
|
||||
backgroundColor: colors.surfaceContainerHigh,
|
||||
appBar: AppBar(title: const Text('云备份')),
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(20),
|
||||
children: [
|
||||
_buildSectionTitle('选择备份方式'),
|
||||
_buildSectionTitle(colors, '选择备份方式'),
|
||||
const SizedBox(height: 12),
|
||||
_buildOption(
|
||||
colors: colors,
|
||||
icon: Icons.storage_outlined,
|
||||
title: 'WebDAV 备份',
|
||||
subtitle: '通过 WebDAV 协议备份到个人云盘',
|
||||
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const WebDAVSyncPage())),
|
||||
onTap: () =>
|
||||
Navigator.push(context, MaterialPageRoute(builder: (_) => const WebDAVSyncPage())),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_buildOption(
|
||||
colors: colors,
|
||||
icon: Icons.sync_outlined,
|
||||
title: '服务端实时同步',
|
||||
subtitle: '自建服务端，多设备数据实时同步',
|
||||
enabled: false,
|
||||
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const ServerSyncPage())),
|
||||
onTap: () =>
|
||||
Navigator.push(context, MaterialPageRoute(builder: (_) => const ServerSyncPage())),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
_buildInfo(),
|
||||
_buildInfo(colors),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSectionTitle(String title) {
|
||||
Widget _buildSectionTitle(ColorScheme colors, String title) {
|
||||
return Row(children: [
|
||||
Container(width: 3, height: 14, decoration: BoxDecoration(color: const Color(0xFF1A1A1A), borderRadius: BorderRadius.circular(2))),
|
||||
Container(
|
||||
width: 3,
|
||||
height: 14,
|
||||
decoration:
|
||||
BoxDecoration(color: colors.primary, borderRadius: BorderRadius.circular(2))),
|
||||
const SizedBox(width: 8),
|
||||
Text(title, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A))),
|
||||
Text(title,
|
||||
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: colors.onSurface)),
|
||||
]);
|
||||
}
|
||||
|
||||
Widget _buildOption({required IconData icon, required String title, required String subtitle, required VoidCallback onTap, bool enabled = true}) {
|
||||
Widget _buildOption({
|
||||
required ColorScheme colors,
|
||||
required IconData icon,
|
||||
required String title,
|
||||
required String subtitle,
|
||||
required VoidCallback onTap,
|
||||
bool enabled = true,
|
||||
}) {
|
||||
return GestureDetector(
|
||||
onTap: enabled ? onTap : null,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(18),
|
||||
decoration: BoxDecoration(
|
||||
color: enabled ? Colors.white : const Color(0xFFF5F5F5), borderRadius: BorderRadius.circular(14),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.03), blurRadius: 6, offset: const Offset(0, 2))],
|
||||
color: enabled ? colors.surface : colors.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.03),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2)),
|
||||
],
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(width: 44, height: 44, decoration: BoxDecoration(color: const Color(0xFFF5F5F5), borderRadius: BorderRadius.circular(10)), child: Icon(icon, color: enabled ? const Color(0xFF666666) : const Color(0xFFBBBBBB), size: 22)),
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(10)),
|
||||
child: Icon(icon,
|
||||
color: enabled
|
||||
? colors.onSurface.withValues(alpha: 0.6)
|
||||
: colors.onSurface.withValues(alpha: 0.3),
|
||||
size: 22)),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(title, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: enabled ? const Color(0xFF1A1A1A) : const Color(0xFFBBBBBB))),
|
||||
Expanded(
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(title,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: enabled ? colors.onSurface : colors.onSurface.withValues(alpha: 0.3))),
|
||||
const SizedBox(height: 3),
|
||||
Text(subtitle, style: TextStyle(fontSize: 12, color: enabled ? const Color(0xFF999999) : const Color(0xFFCCCCCC))),
|
||||
Text(subtitle,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: enabled
|
||||
? colors.onSurface.withValues(alpha: 0.4)
|
||||
: colors.onSurface.withValues(alpha: 0.25))),
|
||||
])),
|
||||
Icon(Icons.chevron_right, color: enabled ? const Color(0xFFCCCCCC) : const Color(0xFFE5E5E5)),
|
||||
Icon(Icons.chevron_right,
|
||||
color: enabled
|
||||
? colors.onSurface.withValues(alpha: 0.25)
|
||||
: colors.outline),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInfo() {
|
||||
Widget _buildInfo(ColorScheme colors) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(18),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(14),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.03), blurRadius: 6, offset: const Offset(0, 2))],
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.03),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2)),
|
||||
],
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Row(children: [
|
||||
Container(width: 36, height: 36, decoration: BoxDecoration(color: const Color(0xFFF5F5F5), borderRadius: BorderRadius.circular(8)), child: const Icon(Icons.info_outline, size: 18, color: Color(0xFF666666))),
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(8)),
|
||||
child: Icon(Icons.info_outline,
|
||||
size: 18, color: colors.onSurface.withValues(alpha: 0.6))),
|
||||
const SizedBox(width: 10),
|
||||
const Text('使用说明', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A))),
|
||||
Text('使用说明',
|
||||
style: TextStyle(
|
||||
fontSize: 14, fontWeight: FontWeight.w600, color: colors.onSurface)),
|
||||
]),
|
||||
const SizedBox(height: 14),
|
||||
_infoItem('WebDAV 备份：将数据备份到支持 WebDAV 的云盘'),
|
||||
_infoItem(colors, 'WebDAV 备份：将数据备份到支持 WebDAV 的云盘'),
|
||||
const SizedBox(height: 8),
|
||||
_infoItem('服务端实时同步：通过自建服务端实现多设备实时同步'),
|
||||
_infoItem(colors, '服务端实时同步：通过自建服务端实现多设备实时同步'),
|
||||
const SizedBox(height: 8),
|
||||
_infoItem('激活码由服务端管理员在管理后台生成'),
|
||||
_infoItem(colors, '激活码由服务端管理员在管理后台生成'),
|
||||
const SizedBox(height: 8),
|
||||
_infoItem('建议定期备份 + 实时同步配合使用'),
|
||||
_infoItem(colors, '建议定期备份 + 实时同步配合使用'),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _infoItem(String text) {
|
||||
Widget _infoItem(ColorScheme colors, String text) {
|
||||
return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Container(width: 5, height: 5, margin: const EdgeInsets.only(top: 5), decoration: BoxDecoration(color: const Color(0xFFBBBBBB), shape: BoxShape.circle)),
|
||||
Container(
|
||||
width: 5,
|
||||
height: 5,
|
||||
margin: const EdgeInsets.only(top: 5),
|
||||
decoration: BoxDecoration(
|
||||
color: colors.onSurface.withValues(alpha: 0.3), shape: BoxShape.circle)),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: Text(text, style: const TextStyle(fontSize: 12, color: Color(0xFF888888), height: 1.5))),
|
||||
Expanded(
|
||||
child: Text(text,
|
||||
style: TextStyle(
|
||||
fontSize: 12, color: colors.onSurface.withValues(alpha: 0.5), height: 1.5))),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user