SuperAPI AI 工具集

shadcn_ui-typography

前端与建站

查看项目

更新于 10-16 05:00

技能介绍

用途:在 Flutter 应用中使用 Shadcn UI 的排版体系,统一文本样式、字体与自定义样式。

主要能力:通过 ShadTheme.of(context).textTheme 获取一致文本样式,默认字体族为 Geist。可用样式名包括:h1Large、h1、h2、h3、h4(标题);p(正文段落);blockquote(引用);table(表头与单元格);list(列表项);lead(引导/副标题);large(大号正文);small(小号/说明文字);muted(弱化/次要文字)。

使用方式:在 Text 组件上引用样式,例如:Text('...', style: ShadTheme.of(context).textTheme.h1)、textTheme.p、textTheme.small、textTheme.muted。

自定义字体:在 /fonts 等目录放置字体资源并在 pubspec.yaml 的 flutter.fonts 中注册,声明 family、asset,以及 style: italic、weight: 700 等变体;然后在 ShadApp 的 ShadThemeData 中设置 textTheme: ShadTextTheme(colorScheme: ..., family: 'UbuntuMono')。

Google Fonts:安装 google_fonts 包后,使用 textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.poppins)。

自定义样式:在 ShadTextTheme 的 custom 参数中传入映射,如 custom: {'myCustomStyle': const TextStyle(fontSize: 16, fontWeight: FontWeight.w400, color: Colors.blue)};访问方式为 ShadTheme.of(context).textTheme.custom['myCustomStyle']!,也可以定义 ShadTextTheme 扩展并以 ShadTheme.of(context).textTheme.myCustomStyle 调用。

适用场景:Flutter 与 Shadcn UI 结合的界面排版、主题字体配置、需要扩展自有文本样式的项目。

限制:资料未提供具体版本兼容性、依赖版本要求、性能或平台限制。