flutter组件 ThemeData

这里只讲组件的定义,需要各位自己去尝试。

Dart 复制代码
ThemeData({
  // 常规配置
  Iterable<Adaptation<Object>>? adaptations, // 定义主题自适应方案的列表。
  bool? applyElevationOverlayColor, // 是否应用海拔叠加颜色。
  NoDefaultCupertinoThemeData? cupertinoOverrideTheme, // Cupertino(iOS风格)主题数据。
  Iterable<ThemeExtension<dynamic>>? extensions, // 主题扩展列表。
  InputDecorationTheme? inputDecorationTheme, // 输入装饰主题。
  MaterialTapTargetSize? materialTapTargetSize, // 材料设计控件的点击目标大小。
  PageTransitionsTheme? pageTransitionsTheme, // 页面转换主题。
  TargetPlatform? platform, // 主题的目标平台。
  ScrollbarThemeData? scrollbarTheme, // 滚动条主题。
  InteractiveInkFeatureFactory? splashFactory, // 交互墨水特性工厂。
  bool? useMaterial3, // 是否使用Material 3设计语言。
  VisualDensity? visualDensity, // 视觉密度。
  
  // 颜色
  Brightness? brightness, // 亮度(明亮/暗黑)。
  Color? canvasColor, // 画布颜色。
  Color? cardColor, // 卡片颜色。
  ColorScheme? colorScheme, // 颜色方案。
  Color? colorSchemeSeed, // 颜色方案的种子。
  Color? dialogBackgroundColor, // 对话框背景颜色。
  Color? disabledColor, // 禁用颜色。
  Color? dividerColor, // 分割线颜色。
  Color? focusColor, // 焦点颜色。
  Color? highlightColor, // 高亮颜色。
  Color? hintColor, // 提示文本颜色。
  Color? hoverColor, // 悬停颜色。
  Color? indicatorColor, // 指示器颜色。
  Color? primaryColor, // 主要颜色。
  Color? primaryColorDark, // 主要颜色的暗色调。
  Color? primaryColorLight, // 主要颜色的亮色调。
  MaterialColor?primarySwatch, // 主要颜色样本。
  Color? scaffoldBackgroundColor, // 底板背景颜色。
  Color? secondaryHeaderColor, // 次要标题颜色。
  Color? shadowColor, // 阴影颜色。
  Color? splashColor, // 溅泼颜色。
  Color? unselectedWidgetColor, // 未选中的小部件颜色。
  // 版式和图像
  String? fontFamily, // 字体系列。
  List<String>? fontFamilyFallback, // 字体回退。
  String? package, // 资源包。
  IconThemeData? iconTheme, // 图标主题数据。
  IconThemeData? primaryIconTheme, // 主要图标主题数据。
  TextTheme? primaryTextTheme, // 主要文本主题数据。
  TextTheme? textTheme, // 文本主题数据。
  Typography? typography, // 排版。
  // 组件的主题
  ActionIconThemeData? actionIconTheme,
  AppBarTheme? appBarTheme,
  BadgeThemeData? badgeTheme,
  MaterialBannerThemeData? bannerTheme,
  BottomAppBarTheme? bottomAppBarTheme,
  BottomNavigationBarThemeData? bottomNavigationBarTheme,
  BottomSheetThemeData? bottomSheetTheme,
  ButtonBarThemeData? buttonBarTheme,
  ButtonThemeData? buttonTheme,
  CardTheme? cardTheme,
  CheckboxThemeData? checkboxTheme,
  ChipThemeData? chipTheme,
  DataTableThemeData? dataTableTheme,
  DatePickerThemeData? datePickerTheme,
  DialogTheme? dialogTheme,
  DividerThemeData? dividerTheme,
  DrawerThemeData? drawerTheme,
  DropdownMenuThemeData? dropdownMenuTheme,
  ElevatedButtonThemeData? elevatedButtonTheme,
  ExpansionTileThemeData? expansionTileTheme,
  FilledButtonThemeData? filledButtonTheme,
  FloatingActionButtonThemeData? floatingActionButtonTheme,
  IconButtonThemeData? iconButtonTheme,
  ListTileThemeData? listTileTheme,
  MenuBarThemeData? menuBarTheme,
  MenuButtonThemeData? menuButtonTheme,
  MenuThemeData? menuTheme,
  NavigationBarThemeData? navigationBarTheme,
  NavigationDrawerThemeData? navigationDrawerTheme,
  NavigationRailThemeData? navigationRailTheme,
  OutlinedButtonThemeData? outlinedButtonTheme,
  PopupMenuThemeData? popupMenuTheme,
  ProgressIndicatorThemeData? progressIndicatorTheme,
  RadioThemeData? radioTheme,
  SearchBarThemeData? searchBarTheme,
  SearchViewThemeData? searchViewTheme,
  SegmentedButtonThemeData? segmentedButtonTheme,
  SliderThemeData? sliderTheme,
  SnackBarThemeData? snackBarTheme,
  SwitchThemeData? switchTheme,
  TabBarTheme? tabBarTheme,
  TextButtonThemeData? textButtonTheme,
  TextSelectionThemeData? textSelectionTheme,
  TimePickerThemeData? timePickerTheme,
  ToggleButtonsThemeData? toggleButtonsTheme,
  TooltipThemeData? tooltipTheme,
  // 已弃用(最新弃用在底部)
  @Deprecated(
    '框架不再使用,请删除对它的任何引用。'
    'For more information, consult the migration guide at '
    'https://flutter.dev/docs/release/breaking-changes/toggleable-active-color#migration-guide. '
    '该特性在v3.4.0-19.0.pre之后已弃用。',
  )
  Color? toggleableActiveColor, // 可切换的活动颜色,已经被弃用。
  @Deprecated(
    '使用colorScheme。而不是errorColor。'
    '该特性在v3.3.0-0.5 pre之后已弃用。',
  )
  Color? errorColor, // 错误颜色,已经被弃用。
  @Deprecated(
    '使用colorScheme。而不是backgroundColor。'
    '该特性在v3.3.0-0.5 pre之后已弃用。',
  )
  Color? backgroundColor, // 背景颜色,已经被弃用。
  @Deprecated(
    '使用BottomAppBarTheme。而不是bottomAppBarColor。'
    '该特性在v3.3.0-0.6 pre之后已弃用。',
  )
  Color? bottomAppBarColor, // 底部应用栏的颜色,已经被弃用。
})  

组件的主题就是flutter提供已经封装好的组件的主题。

使用方法:

Dart 复制代码
class ThemeTestWidget extends StatelessWidget {
  const ThemeTestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
          iconTheme: const IconThemeData(color: Colors.deepOrange) //用于Icon颜色
      ),
      child: const Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          //第一行Icon使用主题中的iconTheme
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.favorite),
                Icon(Icons.airport_shuttle),
              ]
          ),
        ],
      ),
    );
  }
}

如有错误请及时与作者联系~~非常感谢

相关推荐
problc7 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人15 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人19 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile1 天前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓