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),
              ]
          ),
        ],
      ),
    );
  }
}

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

相关推荐
勇气要爆发33 分钟前
【第二阶段-Flutter入门】第四章:常用布局Widget
flutter
QuantumLeap丶40 分钟前
《Flutter全栈开发实战指南:从零到高级》- 13 -状态管理GetX
android·flutter·ios·前端框架
woshijunjunstudy3 小时前
Flutter .obx 与 Rxn<T>的区别
flutter·getx
初遇你时动了情9 小时前
flutter vscode 终端无法使用fvm 版本切换、项目运行
ide·vscode·flutter
一叶难遮天1 天前
Dart语言之面向对象
flutter·面向对象·dart·方法·mixins·泛型·抽象类
汤面不加鱼丸1 天前
flutter实践:DropdownButton2使用示例
flutter
心随雨下1 天前
Flutter Material 3设计语言详解
javascript·flutter·设计语言
猫林老师1 天前
Flutter for HarmonyOS开发指南(六):测试、调试与质量保障体系
flutter·华为·harmonyos
stringwu1 天前
Flutter DevTools 全景介绍
flutter