跳到主要内容

主题

启动画面​

Flutter 的在移动应用中添加启动画面文档提供了关于自定义移动应用中启动画面的最新和最深入的指南。

Android​

在 android/app/src/main/res 文件夹中，替换以下文件夹内的 launch_image.png：

  • mipmap-mdpi
  • mipmap-hdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi

使用你希望在 Android 启动画面上显示的图片资源替换这些文件夹。你提供的 mipmap 文件夹中的 launch_image.png 应该具有适合该文件夹的大小。

你可以通过编辑 android/app/src/main/res/values/colors.xml 中 name="splash_background" 的十六进制代码值来更改启动画面的背景颜色。

iOS​

你应该使用 Xcode Storyboard 配置你的 iOS 启动画面。首先，添加名为以下内容的启动画面图片资源：

  • LaunchImage.png
  • LaunchImage@2x.png
  • LaunchImage@3x.png

这些图片资源的大小应与 ios/Runner/Assets.xcassets/LaunchImage.imageset 文件夹中的文件名相对应。

在 Xcode 中打开你的项目的 ios 文件夹，并在编辑器中打开 Runner/LaunchScreen.storyboard。通过选择这些元素并在 Xcode 检查器窗口中编辑它们的属性，指定你所需的启动画面图像和背景。你可以随意在 Xcode 检查器窗口中进一步编辑启动画面属性，以自定义启动画面的确切外观。

应用启动图标​

你可以使用 Flutter Launcher Icons 包来简化添加新的应用启动图标的过程。

或者，你可能希望手动更新你的应用启动图标。Flutter 的文档包含关于如何为 iOS 和 Android 完成此操作的信息。

应用徽标图片资源显示在信息流视图顶部和应用导航抽屉顶部。要使用自定义资源替换这些徽标，请替换以下文件：

  • packages/app_ui/assets/images/logo_dark.png
  • packages/app_ui/assets/images/logo_light.png

更改 AppLogo 小部件 (packages/app_ui/lib/src/widgets/app_logo.dart) 中指定的尺寸以匹配你的新图像尺寸。

应用颜色​

整个应用中使用的颜色在 packages/app_ui/lib/src/colors 中的 app_colors.dart 文件中指定。向此文件添加自定义颜色，并在应用内将其作为 AppColors 类的属性引用（例如， AppColors.orange）。应用中颜色的作用可以指定为主题信息或内联颜色。

主题颜色​

某些颜色被分配给主题，这允许在整个应用中基于其在用户界面中的预期作用共享颜色。有关指定主题颜色的更多信息，请参考 Flutter 的 使用主题共享颜色和字体样式 指南。

应用主题布局在 packages/app_ui/lib/src/theme 文件夹内的 app_theme.dart 文件中。例如，小部件特定的主题 _appBarTheme 允许你为你的 AppBar 指定颜色和主题信息。

内联颜色​

并非所有你所需的颜色分配都可以通过更改应用的主题数据来指定。你可能只想在小部件的某些实例中使用颜色，或者指定比主题信息支持的更精细的颜色。你的应用中有几种现有的内联颜色规范：

指定按钮颜色

应用按钮的颜色由 packages/app_ui/lib/src/widgets/app_button.dart 中布局的命名构造函数指定。要指定新的按钮颜色，请创建一个新的颜色构造函数。例如，要创建橙色应用按钮，请创建构造函数：

const AppButton.orange({
  Key? key,
  VoidCallback? onPressed,
  double? elevation,
  TextStyle? textStyle,
  required Widget child,
}) : this._(
        key: key,
        onPressed: onPressed,
        buttonColor: AppColors.orange,
        child: child,
        foregroundColor: AppColors.white,
        elevation: elevation,
        textStyle: textStyle,
     );

然后，你可以在你的应用中调用新的 AppButton.orange 构造函数，无论你想要添加橙色按钮的位置，或者使用你的新构造函数替换现有的构造函数调用（例如 AppButton.redWine），以更新按钮颜色。

指定 TabBar 颜色

app_theme.dart 中指定的 TabBarTheme 不提供 backgroundColor 属性。要为在 AppBar 下方渲染的 CategoriesTabBar 指定特定颜色，请编辑 lib/categories/widgets/categories_tab_bar.dart 内 CategoriesTabBar 的 build() 方法，将 TabBar 小部件放入 ColoredBox 中。

return ColoredBox(
  color: AppColors.orange,
  child: TabBar(
    controller: controller,
    isScrollable: true,
    tabs: tabs,
  ),
);

其他具有内联指定颜色的小部件包括：

  • PostContentPremiumCategory
  • SlideshowCategory
  • PostContentCategory
  • MagicLinkPromptSubtitle
  • ManageSubscriptionView
  • AppTextField
  • ArticleIntroduction

排版​

字体​

有关字体自定义的常规详细信息，请参考 Flutter 的 使用自定义字体 文档。

要更改你的应用中使用的字体，请首先将你的字体资源添加到 packages/app_ui/assets/fonts 中，然后在 packages/app_ui/pubspec.yaml 的 fonts 部分下列出添加的字体。

你可以在 packages/app_ui/lib/src/typography/app_text_styles.dart 文件中指定你希望在应用的不同元素中使用哪些字体。

你可以通过更改 app_text_styles.dart 文件中以下位置的 fontFamily 值来指定你的应用中使用的字体，以匹配你所需的字体系列的名称：

  • UITextStyle._baseTextStyle
    • 指定 UI 元素中使用的默认字体。
  • ContentTextStyle._baseTextStyle
    • 指定新闻内容中使用的默认字体。
  • button
    • 指定按钮中使用的字体。
  • caption
    • 指定字幕文本中使用的字体。
  • overline
    • 指定覆盖文本元素（例如类别标签）中使用的字体。
  • labelSmall
    • 指定标签文本中使用的字体（*在模板中开箱即用时未被引用*）。

其他自定义​

要进一步自定义你的应用的排版，你可以在 packages/app_ui/lib/src/typography/app_text_styles.dart 文件中添加和编辑各种 TextStyle 值，例如 fontWeight、fontSize 和其他值。下面说明了所选 TextStyles 与应用中视觉元素之间的对应关系。

要为包含在 HtmlBlocks 中的文本设置样式，你可以编辑 packages/news_blocks_ui/lib/src/html.dart 中的 style 映射，以将 HTML 选择器与你希望在渲染 HTML 时使用的 TextStyle 关联起来。

文本样式可视化​