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

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

相关推荐
MakeZero20 小时前
Flutter那些事-展示型组件篇
flutter
赤心Online20 小时前
从零开始掌握 Shorebird:Flutter 热更新实战指南
flutter
wangruofeng21 小时前
AI 助力 Flutter 3.27 升级到 3.38 完整指南:两周踩坑与实战复盘
flutter·ios·ai编程
Zsnoin能2 天前
Flutter仿ios液态玻璃效果
flutter
傅里叶2 天前
iOS相机权限获取
flutter·ios
Haha_bj2 天前
Flutter—— 本地存储(shared_preferences)
flutter
心之语歌2 天前
Flutter 存储权限:适配主流系统
flutter
恋猫de小郭2 天前
Android 官方正式官宣 AI 支持 AppFunctions ,Android 官方 MCP 和系统级 OpenClaw 雏形
android·前端·flutter
MakeZero3 天前
Flutter那些事-布局篇
flutter
王码码20353 天前
Flutter for OpenHarmony:socket_io_client 实时通信的事实标准(Node.js 后端的最佳拍档) 深度解析与鸿蒙适配指南
android·flutter·ui·华为·node.js·harmonyos