ecp_theme是负责翼协云主题配置管理,以及主题相关方法/属性扩展,方便开发

注意:该库为内部项目需求设计,API 可能随业务调整而变化,通用场景请自行评估兼容性。问题反馈请通过仓库主页提交。

主题

目前默认主题分为Light和Dark,均配置于resource问价下的themes.dart文件中,亮色主题配色均按照UI设计配置,暗色主题默认使用Flutter默认Dark主题;已配置属性如下:

  • brightness(明亮度)
  • primaryColor(导航/底部TabBar)
  • scaffoldBackgroundColor(scaffold背景色,使用Scaffold时生效)
  • backgroundColor(弹窗背景色)
  • cardColor(Card控件背景色)
  • colorScheme->seedColor (生成ColorScheme内一系列颜色)
  • splashFactory (水波纹,设置为不产生水波纹)
  • useMaterial3 (使用Material3风格主题)
  • tabBarTheme (TabBar内Label样式,选中/未选中颜色等)
  • appBarTheme (AppBar 内Title,背景等样式)
  • textTheme->titleLarge(大标题)
  • textTheme->titleMedium(中标题)
  • textTheme->titleSmall(小标题)
  • textTheme->bodyLarge(内容-大字体)
  • textTheme->bodyMedium(内容-中字体)
  • textTheme->bodyMedium(内容-小字体)
  • dividerTheme (分割线颜色)
  • bottomNavigationBarTheme (底部导航栏样式)
  • extensions -> SupportColors(扩展的辅助颜色)

这里重点说明**TextTheme,**具体配置如下:

属性 Title(大/中/小) Body(大/中/小)
fontSize(字体大小) 22/16/14 (sp) 16/14/12 (sp)
letterSpacing(字间距) 0/0.1/0.1 0.5/0.3/0.4
height (行高) 1.3/1.5/1.4 1.5/1.4/1.3
fontWeight(字重) 400/500/500 400/400/400
color(颜色) #FF17233D #FF515A6E

尺寸

  • designSize:设计稿尺寸(375*812)主题适配用
  • listHorizontalPadding:列表横向内边距(12.w)
  • roundCornerRadius:图标\图⽚\卡⽚\输⼊框\弹窗等 背景圆角半径 (5.w)
  • verticalDividerHeight:纵向分割线高度(24.h)
  • dividerThickness:分割线厚度(1.h)
  • bottomIconSize:bottomNavigationBar Icon 尺寸(22.w)

扩展

ColorExt (extension on Color)

  • toHexString:将Color转为16进制值
  • dark:按照根据factor比例(0.0~1.0)降低当前颜色亮度
  • light:按照根据factor比例(0.0~1.0)提高当前颜色亮度
  • y:通过RGB值计算YUV中Y值(亮度值)
  • brightness:根据当前颜色计算其亮度Brightness
  • isDark:是否颜色偏暗
  • reverseBrightness:颜色亮度反转 (lerp(white/black))
  • reverseColor: 颜色反转(RGB形式计算)

ThemeExt (extension on BuildContext)

主题扩展基本对当前主题类(ThemeData)再包装(Theme.of(BuildContext),具体请查看ThemeData

文本组件

文本组件是对Text组件的再封装,将常用属性放置在可选参数内,加上使用定义的默认的TextThem,方便开发;分为以下两类:

  • TextTitles
  • TextBodies

使用的Style均来自于TextTheme中对应的 title/body - Large/Medium/Small -Style