渐变不只是装饰——在 E-Brufen 中它是信息架构的一部分用颜色区分功能模块。一、三大功能卡片的渐变体系// lib/theme/app_theme.dartclassAppTheme{// 白噪音 — 蓝色系冷静、放松staticconstLinearGradientsoundscapeGradientLinearGradient(colors:[Color(0xFF81D4FA),Color(0xFF4FC3F7)],begin:Alignment.topLeft,end:Alignment.bottomRight,);// 呼吸练习 — 紫色系冥想、灵性staticconstLinearGradientbreatheGradientLinearGradient(colors:[Color(0xFFB39DDB),Color(0xFFCE93D8)],begin:Alignment.topLeft,end:Alignment.bottomRight,);// 情绪日记 — 橙色系温暖、记录staticconstLinearGradientdiaryGradientLinearGradient(colors:[Color(0xFFFFB74D),Color(0xFFFFCC80)],begin:Alignment.topLeft,end:Alignment.bottomRight,);}★ Insight ─────────────────────────────────────色彩不是随意选的——蓝色 水白噪音中的雨声/海浪紫色 灵性呼吸/冥想橙色 温暖情绪/日记。这种色彩语义学让用户无需阅读文字就能建立对功能的直觉认知。─────────────────────────────────────────────────二、统一的对角渐变三个渐变都使用topLeft → bottomRight对角线方向。这不是巧合——统一的渐变方向创造了视觉一致性让用户感觉三张卡片属于同一个家族。各种方向的效果begin → end效果topLeft → bottomRight暖光从左上方照下最自然top → bottom垂直渐变天空感left → right水平渐变科技感三、HomeCard渐变 信息 导航// lib/widgets/home_card.dartclassHomeCardextendsStatelessWidget{finalStringemoji;finalStringtitle;finalStringsubtitle;finalGradientgradient;// ← 渐变作为参数注入finalVoidCallbackonTap;overrideWidgetbuild(BuildContextcontext){returnCard(margin:constEdgeInsets.symmetric(horizontal:20,vertical:8),child:InkWell(onTap:onTap,borderRadius:BorderRadius.circular(20),child:Container(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:gradient,// ← 应用到 ContainerborderRadius:BorderRadius.circular(20),),child:Row(children:[Text(emoji,style:constTextStyle(fontSize:40)),constSizedBox(width:16),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(title,style:AppTheme.cardTitleStyle),Text(subtitle,style:AppTheme.cardSubtitleStyle),],),),constIcon(Icons.chevron_right,color:Colors.white70),],),),),);}}布局结构┌──────────────────────────────────┐ │ 白噪音 › │ │ 雨声 · 海浪 · 篝火 · 森林 │ └──────────────────────────────────┘ ↑ ↑ 40px emoji 导航箭头四、文字在渐变上的可读性staticconstTextStylecardTitleStyleTextStyle(fontSize:20,fontWeight:FontWeight.bold,color:Colors.white,// 白色文字在彩色渐变上);staticconstTextStylecardSubtitleStyleTextStyle(fontSize:13,color:Colors.white70,// 70% 透明度 柔和副标题);白色文字在蓝/紫/橙渐变上都有良好的对比度——前提是渐变的颜色不能太亮。E-Brufen 的渐变颜色都偏中饱和度确保了#FFFFFF文字的可读性。⚠️ 如果使用浅色渐变如黄色→白色白色文字就不可读了。选择渐变颜色的关键约束两个端点颜色都足够深以支撑白色文字。五、与场景选择器色彩对比Soundscape 的四个场景也用了色彩场景颜色和卡片渐变的关系海边入眠#4FC3F7与 soundscapeGradient 的终点色相同雨中办公#81D4FA与 soundscapeGradient 的起点色相同森林冥想#66BB6A品牌主色篝火夜读#FFB74D与 diaryGradient 起点色相近这种色彩呼应让用户从首页卡片进入功能页面后能感受到视觉连续性。小结渐变不是随便加个LinearGradient就完事了。它涉及色彩语义学什么功能用什么颜色、布局约束渐变上的文字可读性、视觉一致性统一的渐变方向以及跨页面的色彩呼应。E-Brufen 的三张渐变卡片就是这些原则的实践。作者简介E-Brufen DevFlutter 鸿蒙开发者专注于跨平台移动应用开发与心理健康数字化,项目地址AtomGit - E-Brufen。