flutter 五点一：MaterialApp Theme

ThemeData

  factory ThemeData({bool? applyElevationOverlayColor,  //material2的darkTheme下 增加一个半透明遮罩 来凸显阴影效果  material3下无效   貌似没啥用NoDefaultCupertinoThemeData? cupertinoOverrideTheme,  //ios组件样式  Iterable<ThemeExtension<dynamic>>? extensions,  //自定义颜色  可用于统一颜色处理InputDecorationTheme? inputDecorationTheme,   //TextField的主题样式MaterialTapTargetSize? materialTapTargetSize,   //配置可点击的weight 的点击目标和布局大小PageTransitionsTheme? pageTransitionsTheme,  //定义页面过度动画...
}

extensions

  • Iterable<ThemeExtension>? extensions
  • 自定义颜色 可用于统一颜色处理 （定一个常量类不是更简单么 em…）
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';main(){runApp(const MyApp());
}class MyApp extends StatelessWidget{const MyApp();@overrideWidget build(BuildContext context) {
//定义不同的ThemeDataThemeData themeRed = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 0)],);ThemeData themeGreen = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 1)],);ThemeData themeBlue = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 2)],);return MaterialApp(theme: themeBlue,   //使用ThemeData  显示不同的颜色home: A(),);}void changeTheme(){}
}class ThemeColors extends ThemeExtension<ThemeColors>{static String main_color = "main_color";static String text_color = "text_color";static String text_background = "text_background";var themeType = 0;var themeRed = {main_color:Colors.red,text_color:const Color(0xFFD26161),text_background:const Color(0xFFEAE4E4),};var themeGreen = {main_color:Colors.green,text_color:const Color(0xFF6EDC9A),text_background:const Color(0xFFEAE4E4),};var themeBlue = {main_color:Colors.blue,text_color:const Color(0xFF6F83E7),text_background:const Color(0xFFEAE4E4),};ThemeColors({this.themeType = 0});ThemeColors.themeRed(this.themeRed);ThemeColors.themeGreen(this.themeGreen);ThemeColors.themeBlue(this.themeBlue);@overrideThemeExtension<ThemeColors> copyWith() {var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}@overrideThemeExtension<ThemeColors> lerp(covariant ThemeExtension<ThemeColors>? other, double t) {if(other !is ThemeColors){return this;}var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}Color getColor(String colorName){var resultMap = null;switch(this.themeType){case 0:resultMap = themeRed;break;case 1:resultMap = themeGreen;break;case 2:resultMap = themeBlue;break;}return resultMap[colorName];}}class A extends StatefulWidget{A(){print("A页面启动！");}@overrideState<StatefulWidget> createState() => AState();
}class AState extends State<A>{@overrideWidget build(BuildContext context) {ThemeColors themeColors = Theme.of(context).extension<ThemeColors>()??ThemeColors(themeType: 0);return Scaffold(backgroundColor: themeColors.getColor(ThemeColors.main_color),  //背景色使用主题的颜色);}
}

结果
theme: themeRed, //红色
theme: themeGreen, //绿色
theme: themeBlue, //蓝色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

inputDecorationTheme

  • 输入框的样式 定义输入框各种显示样式及交互样式
 ThemeData themeBlue = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 2)],inputDecorationTheme: InputDecorationTheme(labelStyle: TextStyle(color: Colors.black),  //黑字hintStyle: TextStyle(color: Colors.grey),  //hint字体 灰色border: UnderlineInputBorder(),    //底部划线边框focusedBorder: UnderlineInputBorder(),));

属性

const InputDecorationTheme({this.labelStyle,this.floatingLabelStyle,this.helperStyle,this.helperMaxLines,this.hintStyle,this.errorStyle,this.errorMaxLines,this.floatingLabelBehavior = FloatingLabelBehavior.auto,this.floatingLabelAlignment = FloatingLabelAlignment.start,this.isDense = false,this.contentPadding,this.isCollapsed = false,this.iconColor,this.prefixStyle,this.prefixIconColor,this.suffixStyle,this.suffixIconColor,this.counterStyle,this.filled = false,this.fillColor,this.activeIndicatorBorder,this.outlineBorder,this.focusColor,this.hoverColor,this.errorBorder,this.focusedBorder,this.focusedErrorBorder,this.disabledBorder,this.enabledBorder,this.border,this.alignLabelWithHint = false,this.constraints,});

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7

在这里插入图片描述

materialTapTargetSize

  • 组件最小点击区域
  • 取值 如下
enum MaterialTapTargetSize {/// Expands the minimum tap target size to 48px by 48px.  将最小点击目标大小扩展为 48px x 48px。////// This is the default value of [ThemeData.materialTapTargetSize] and the/// recommended size to conform to Android accessibility scanner/// recommendations.padded,/// Shrinks the tap target size to the minimum provided by the Material  将点击目标尺寸缩小到Material 规范提供的最小值。/// specification.shrinkWrap,
}

pageTransitionsTheme

  • 页面切换动画
  • 切换动画支持 android ios macos
    在这里插入图片描述

默认页面切换动画
请添加图片描述

修改后的切换动画 从下往上顶出动画

 pageTransitionsTheme:PageTransitionsTheme(builders: <TargetPlatform, PageTransitionsBuilder>{TargetPlatform.android:OpenUpwardsPageTransitionsBuilder()}),

请添加图片描述
自定义页面切换动画

class MyPageTransitionsBuilder extends PageTransitionsBuilder {@override![请添加图片描述](https://img-blog.csdnimg.cn/direct/8874fd6cec764fa4a1b042b4d46bb67d.gif)Widget buildTransitions<T>(PageRoute<T>? route,BuildContext? context,Animation<double> animation,    //显示页面执行的动画Animation<double> secondaryAnimation,   //隐藏页面执行的动画Widget? child,) {return ScaleTransition(   //缩放动画  scale: animation,child: RotationTransition(  //旋转动画turns: animation,child: child,),);}
}

结果：B页面旋转放大显示
请添加图片描述
若 return改为如下

return ScaleTransition(  //B页面放大scale: animation,child: RotationTransition(   //A页面旋转turns: secondaryAnimation,child: child,),);

效果如下
请添加图片描述
其它类型动画 改变return即可 或可仿照系统默认切换动画类改造自己想要的动画

return SizeTransition(sizeFactor: animation,child: SizeTransition(sizeFactor: animation,child: child,),);

请添加图片描述

全部代码


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';main(){runApp(const MyApp());
}class MyApp extends StatelessWidget{const MyApp();@overrideWidget build(BuildContext context) {ThemeData themeRed = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 0)],);ThemeData themeGreen = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 1)],);ThemeData themeBlue = ThemeData.light().copyWith(extensions: <ThemeExtension<ThemeColors>>[ThemeColors(themeType: 2)],inputDecorationTheme: InputDecorationTheme(labelStyle: TextStyle(color: Colors.black),hintStyle: TextStyle(color: Colors.grey),border: UnderlineInputBorder(),focusedBorder: UnderlineInputBorder(),),materialTapTargetSize:MaterialTapTargetSize.shrinkWrap,pageTransitionsTheme:PageTransitionsTheme(builders: <TargetPlatform, PageTransitionsBuilder>{TargetPlatform.android:MyPageTransitionsBuilder()}),);return MaterialApp(theme: themeBlue,home: A(),routes: {"/A": (context) => A(),"/B": (context) => B(),"/C": (context) => C(),},);}void changeTheme(){}
}class ThemeColors extends ThemeExtension<ThemeColors>{static String main_color = "main_color";static String text_color = "text_color";static String text_background = "text_background";var themeType = 0;var themeRed = {main_color:Colors.red,text_color:const Color(0xFFD26161),text_background:const Color(0xFFEAE4E4),};var themeGreen = {main_color:Colors.green,text_color:const Color(0xFF6EDC9A),text_background:const Color(0xFFEAE4E4),};var themeBlue = {main_color:Colors.blue,text_color:const Color(0xFF6F83E7),text_background:const Color(0xFFEAE4E4),};ThemeColors({this.themeType = 0});ThemeColors.themeRed(this.themeRed);ThemeColors.themeGreen(this.themeGreen);ThemeColors.themeBlue(this.themeBlue);@overrideThemeExtension<ThemeColors> copyWith() {var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}@overrideThemeExtension<ThemeColors> lerp(covariant ThemeExtension<ThemeColors>? other, double t) {if(other !is ThemeColors){return this;}var result = null;switch(this.themeType){case 0:result = ThemeColors.themeRed(themeRed);break;case 1:result = ThemeColors.themeGreen(themeGreen);break;case 2:result = ThemeColors.themeBlue(themeBlue);break;}return result;}Color getColor(String colorName){var resultMap = null;switch(this.themeType){case 0:resultMap = themeRed;break;case 1:resultMap = themeGreen;break;case 2:resultMap = themeBlue;break;}return resultMap[colorName];}}class A extends StatefulWidget{A(){print("A页面启动！");}@overrideState<StatefulWidget> createState() => AState();
}class AState extends State<A>{@overrideWidget build(BuildContext context) {ThemeColors themeColors = Theme.of(context).extension<ThemeColors>()??ThemeColors(themeType: 0);return Scaffold(backgroundColor: themeColors.getColor(ThemeColors.main_color),body: Container(child: Column(children: [// TextField(//   decoration: InputDecoration(//     hintText: "请输入内容"//   ),// ),TextButton(onPressed: (){Navigator.pushNamed(context, '/B');}, child: Text("B"),style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.green),padding: MaterialStateProperty.all(EdgeInsets.all(100))),),TextButton(onPressed: (){Navigator.pushNamed(context, '/C');}, child: Text("C"),style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red),padding: MaterialStateProperty.all(EdgeInsets.all(100)),),),],),),);}
}class B extends StatefulWidget{B(){print("B页面启动！");}@overrideState<StatefulWidget> createState() => BState();
}class BState extends State<B>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"),),);}
}class C extends StatefulWidget{@overrideState<StatefulWidget> createState() => CState();
}class CState extends State<C>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text("CCCCCCCCCCCCCCCCCCCCCCCCC"),),);}
}class MyPageTransitionsBuilder extends PageTransitionsBuilder {@overrideWidget buildTransitions<T>(PageRoute<T>? route,BuildContext? context,Animation<double> animation,Animation<double> secondaryAnimation,Widget? child,) {// return ScaleTransition(//   scale: animation,//   child: RotationTransition(//     turns: secondaryAnimation,//     child: child,//   ),// );return SizeTransition(sizeFactor: animation,child: SizeTransition(sizeFactor: animation,child: child,),);}
}

其他分享

  • 学习过程中最大的方式就是查看源码
    比如pageTransitionsTheme 此属性传什么值 怎么传
    Android Studio 使用 Ctrl+左键
    在这里插入图片描述

Ctrl+左键 点击
在这里插入图片描述
需要一个 builders参数
并且有个 defalutBuilder
基本上可以知道怎么使用

再加上 百度/google 搞定！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/631625.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Java基础_01】Java运行机制及运行过程

【Java基础_01】Java运行机制及运行过程

【Java基础_01】Java运行机制及运行过程 文章目录 【Java基础_01】Java运行机制及运行过程1.Java 运行机制及运行过程1.1 Java 核心机制-Java 虚拟机 [JVM java virtual machine] 1.2 JDK&#xff0c;JRE1.3 JVM,JDK和JRE1.4 环境变量path1.4.1 为什么要配置path1.4.2 配置环…
阅读更多...
Mesh自组网通信技术概述

Mesh自组网通信技术概述

Mesh自组网核心技术 Mesh自组网&#xff08;Mesh Networking&#xff09;是一种网络技术&#xff0c;主要用于在多个节点之间建立动态的、自我管理的网络连接。这种技术的核心在于其自我组织和自我修复的能力&#xff0c;使得网络能够在节点移动或节点故障时自动调整。以下是Me…
阅读更多...
2024.1.17 用户画像day02 - Elastic Search

2024.1.17 用户画像day02 - Elastic Search

目录 ES和数据库的类比 ELK集中日志协议栈介绍 ES的介绍 ES的架构 ES中的名词 ES中的角色 分片与副本的区别在于: MYSQL分库与分表: 倒排序索引: ES写入数据原理: ES读取、检索数据原理: 重点: ES 的架构 , ES读写的原理 ES和数据库的类比 关系型数据库非关系型数…
阅读更多...
C++发展史

C++发展史

目录 什么是C C的发展史 C的重要性 C在实际工作中的应用 “21天教你学会C” 什么是C 先看看祖师爷&#xff0c;记得多拜拜&#x1f92d; C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的 程序&#xff0c;需要高度…
阅读更多...
Vue3 + Electron框架读取程序外部配置文件

Vue3 + Electron框架读取程序外部配置文件

网上找了一堆都不行&#xff0c;根据这个步骤来肯定能用 1. 在项目下新建一个config.json文件 2. json文件中写入一些配置 3. vue.config.js中配置打包时把config.json文件copy到应用目录下 pluginOptions:{electronBuilder:{nodeIntegration:true,builderOptions: {extraReso…
阅读更多...
MySQL表的基本插入查询操作详解

MySQL表的基本插入查询操作详解

博学而笃志&#xff0c;切问而近思 文章目录 插入插入更新 替换查询全列查询指定列查询查询字段为表达式查询结果指定别名查询结果去重 WHERE 条件基本比较逻辑运算符使用LIKE进行模糊匹配使用IN进行多个值匹配 排序筛选分页结果更新数据删除数据截断表聚合函数COUNTSUMAVGMAXM…
阅读更多...
怎样实现安全便捷的网间数据安全交换？

怎样实现安全便捷的网间数据安全交换？

数据安全交换是指在数据传输过程中采取一系列措施来保护数据的完整性、机密性和可用性。网间数据安全交换&#xff0c;则是需要进行跨网络、跨网段甚至跨组织地进行数据交互&#xff0c;对于数据的传输要求会更高。 大部分企业都是通过网闸、DMZ区、VLAN、双网云桌面等方式实现…
阅读更多...
2024美赛数学建模思路 - 案例：ID3-决策树分类算法

2024美赛数学建模思路 - 案例：ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…
阅读更多...
redis数据安全（一）数据持久化

redis数据安全（一）数据持久化

一、Redis数据安全措施: 1、将数据持久化至硬盘 2、将数据复制至其他机器&#xff1b; 复制是在数据持久化的基础上进行的。 二、将数据持久化至硬盘 1、介绍&#xff1a;Redis是一个基于内存的数据库&#xff0c;它的数据是存放在内存中&#xff0c;内存有个问题就是关闭…
阅读更多...
Python中使用HTTP代理进行网络请求

Python中使用HTTP代理进行网络请求

在Python中&#xff0c;HTTP代理是一种常用的技术&#xff0c;用于控制和修改HTTP请求和响应。通过使用HTTP代理&#xff0c;我们可以更好地控制网络请求的行为&#xff0c;提高安全性、隐私性和效率。下面我们将详细介绍如何在Python中使用HTTP代理进行网络请求。 一、HTTP代…
阅读更多...
风丘科技为您提供完整的ADAS测试方案

风丘科技为您提供完整的ADAS测试方案

一 方案概述 随着5G通讯与互联网的快速发展&#xff0c;智能汽车和ADAS辅助系统的研究与发展在世界范围内也在如火如荼地进行。风丘科技紧跟时代脚步&#xff0c;经多年积累沉淀&#xff0c;携手整车厂与高校共同研发打造出了一套完整且适用于国内ADAS测试的系统方案。 | ADAS…
阅读更多...
sql中的explain关键字用法

sql中的explain关键字用法

在SQL中&#xff0c;使用EXPLAIN关键字可以获取查询的执行计划&#xff0c;以便进行性能优化和查询调优。执行计划提供了关于查询操作的详细信息&#xff0c;涵盖了多个表头字段&#xff0c;每个字段都提供了特定的信息。以下是explain表头字段解释&#xff1a; id&#xff1…
阅读更多...
工厂企业消防安全AI可视化视频智能监管解决方案

工厂企业消防安全AI可视化视频智能监管解决方案

一、方案背景 2023年11月20日下午6时30分许&#xff0c;位于江苏省无锡市惠山区前洲街道的某公司突发严重火灾&#xff0c;共造成7人死亡。这次火灾提醒我们工业安全至关重要&#xff0c;企业都应该时刻保持警惕&#xff0c;加强安全意识和培训&#xff0c;提高应对突发事件的…
阅读更多...
vue实现 marquee(走马灯)

vue实现 marquee(走马灯)

样式 代码 <div class"marquee-prompt"><div class"list-prompt" refboxPrompt><span v-for"item in listPrompt" :title"item" class"prompt">{{item}}</span></div> </div>data() {…
阅读更多...
【分布式监控】zabbix与grafana连接

【分布式监控】zabbix与grafana连接

1.在zabbix- server服务端安装grafana&#xff0c;并启动服务 先在官网下载软件 https://grafana.com/grafana/download/9.4.7?editionenterprise&pggraf&plcmtdeploy-box-1#可以翻译成中文介绍&#xff0c;很详细的教程 yum install -y https://dl.grafana.com/ent…
阅读更多...
PDF转PowerPoint - Java实现方法

PDF转PowerPoint - Java实现方法

通过编程实现PDF转PPT的功能&#xff0c;可以自动化转换过程&#xff0c;减少手动操作的工作量&#xff0c;并根据需要进行批量转换。将PDF文件转换为PPT文档后&#xff0c;可以利用PPT的丰富功能和动画效果&#xff0c;达到更好的演示效果。 在Java中&#xff0c;我们可以使用…
阅读更多...
100天精通鸿蒙从入门到跳槽——第5天：TypeScript 知识储备：函数

100天精通鸿蒙从入门到跳槽——第5天：TypeScript 知识储备：函数

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…
阅读更多...
群晖NAS搭建WebDav结合内网穿透实现公网访问本地影视资源

群晖NAS搭建WebDav结合内网穿透实现公网访问本地影视资源

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
酒类销售新模式：让用户成为你的“免费“推销员！

酒类销售新模式：让用户成为你的“免费“推销员！

随着市场的不断变化&#xff0c;传统的销售模式已经无法满足消费者的需求。如何创新商业模式&#xff0c;提高销售量&#xff0c;成为了酒类企业面临的重要问题。最近&#xff0c;一种新型的酒类销售模式悄然兴起&#xff0c;该模式以"利己"和"利他"为核心…
阅读更多...
用sdkman在linux上管理多个java版本

用sdkman在linux上管理多个java版本

概述&#xff1a; SDKMAN 是一个用于管理软件开发工具的工具&#xff0c;允许您轻松地安装、升级和切换不同版本的 JDK、Maven、Gradle 等工具。以下是在 Linux 上安装 SDKMAN! 的基本步骤&#xff1a; 安装SdkMan 使用 curl 安装 SDKMAN!: 打开终端&#xff0c;并运行以下命…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023