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

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

相关推荐
你听得到1129 分钟前
弹窗库1.1.0版本发布!不止于统一,更是全面的体验升级!
android·前端·flutter
RaidenLiu30 分钟前
Riverpod 3 :掌握异步任务处理与 AsyncNotifier
前端·flutter
无知的前端4 小时前
Flutter 模型转JSON跳过零值/null
flutter·json
jiushiapwojdap19 小时前
Flutter上手记:为什么我的按钮能同时在iOS和Android上跳舞?[特殊字符][特殊字符]
android·其他·flutter·ios
木子雨廷1 天前
Flutter 局部刷新小组件汇总
前端·flutter
恋猫de小郭1 天前
iOS 26 正式版即将发布,Flutter 完成全新 devicectl + lldb 的 Debug JIT 运行支持
android·前端·flutter
君赏1 天前
Petrel(雨燕)Flutter 热更新如何在我们项目应用
flutter
JulyYu1 天前
Flutter混合栈适配安卓ActivityResult
android·flutter
海的天空16611 天前
Flutter旧版本升级-> Android 配置、iOS配置
android·flutter·ios
小蜜蜂嗡嗡1 天前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter