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

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

相关推荐
Nerd(BUG版)11 小时前
Flutter学习day5--事件手势与命中测试
学习·flutter
传奇开心果15 小时前
【Flutter踩坑排雷】第5课:扩展方法冲突坑|同名扩展引发编译歧义,故障规避手段
android·flutter
雪铃儿1 天前
Flutter 双端热更新新方案:基于 Dart 官方动态模块的 flutter_patcher 1.0.0
flutter·hotfix
好的佩奇2 天前
Dart 之方法、操作符与可调用对象
android·flutter·dart
恋猫de小郭2 天前
Flutter Impeller Vulkan 内存持续上涨,问题没想到是文字阴影
android·前端·flutter
传奇开心果3 天前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
android·flutter
行者-全栈开发3 天前
Flutter 插件 device_calendar_plus 开源鸿蒙适配实战:从权限弹窗失灵到循环日程跑通
flutter·跨平台·harmonyos·arkts·日历·适配·开源鸿蒙
恋猫de小郭3 天前
Flutter 开始支持 Jetpack Compose Platform View
android·前端·flutter
SoaringHeart3 天前
Flutter 查缺补漏:@JsonKey 属性全解,让模型层不再被后端字段牵着走
flutter