RaisedButton RaisedButton是一个material风格”凸起“的按钮,基本用法: RaisedButton( child: Text('Button'), onPressed...onHighlightChanged为高亮变化回调,按下时处于高亮状态,抬起处于不高亮状态,用法如下: RaisedButton( onHighlightChanged: (high){ },...disabledTextColor 禁用状态下字体颜色 color 背景颜色...disabledColor 禁用状态下背景颜色 highlightColor 高亮颜色,按下时的颜色 splashColor...shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70] 如果按钮处于禁用状态,可以设置禁用状态下按钮及边框的颜色
RaisedButton RaisedButton是一个material风格”凸起“的按钮,基本用法: RaisedButton( child: Text('Button'), onPressed...onHighlightChanged为高亮变化回调,按下时处于高亮状态,抬起处于不高亮状态,用法如下: RaisedButton( onHighlightChanged: (high){ },...... ) 按钮可以设置字体及各种状态颜色,总结如下: 属性 说明 textColor 字体颜色 disabledTextColor 禁用状态下字体颜色 color 背景颜色 disabledColor...禁用状态下背景颜色 highlightColor 高亮颜色,按下时的颜色 splashColor 水波纹颜色,按下松开会有水波纹效果 以textColor为例,用法如下: RaisedButton(...如果按钮处于禁用状态,可以设置禁用状态下按钮及边框的颜色: ToggleButtons( onPressed: null, disabledColor: Colors.grey[
, // 高亮变化的回调 this.textTheme, // 文字主题 this.textColor, /...与 FlatButton 基本完全相同,只是 RaisedButton 多了一些阴影高度的特有属性,和尚准备同时对两类 Button 进行尝试,比较两者的不同; 案例尝试 和尚首先尝试最基本的 RaisedButton...colorBrightness 代表颜色对比度,一般分为 light / dark 两种;一般时深色的背景需要浅色的文字对比,浅色的背景需要深色的文字对比; // 可点击 RaisedButton(child...和尚原来以为按钮的子元素是 Widget,可自由设置各类效果,单独的 textColor 是否会略显多余;可实际并非如此,子元素设置颜色等之后 textColor 不生效;但 textColor 与主题相关...使用 RaisedButton 时会自带阴影效果,阴影的高度和高亮时的阴影高度均可自由设置;但是阴影的颜色应该如何处理呢,官方暂未提供阴影效果属性;和尚尝试了网上大神的方式,RaisedButton 外层依赖带模糊阴影效果的
FlatButton、RaisedButton、OutlineButton 实际上,FlatButton、RaisedButton和OutlineButton这三个按钮组件的内部属性基本都是一样的,所以我接下来以...textColor,文本颜色 color,按钮的背景颜色 disabledColor,按钮禁用时的背景颜色 disabledTextColor,按钮禁用时的文本颜色 splashColor,点击按钮时水波纹的颜色...上述例子我都是以RaisedButton为例来演示的,实际上,RaisedButton、FlatButton和OutlineButton这三者的使用都是完全一样的。...实际上,RaisedButton是立体效果的,而FlatButton是扁平化的平面效果;OutlineButton是边框按钮,对齐设置背景颜色是不起效果的。...onPressed: () => print("FloatingActionButton"), backgroundColor: Colors.yellow, //按钮的背景颜色
onHighlightChanged, //水波纹高亮变化回调,按下返回true,抬起返回false 使用默认值就可以 ButtonTextTheme textTheme, //按钮的主题 Color..., //按钮禁用时候背景色 Color highlightColor, // 点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色 Color splashColor, //水波纹的颜色...下面是App中的源码 child: Column( children: [ RaisedButton( onPressed: () {}, child...: Text("textColor文本的颜色,color背景颜色,highlightColor按钮按下的颜色"), textColor: Color(0xffff0000), color...按下的时候的阴影"), disabledElevation: 5.0, ), ), RaisedButton( onPressed: () {},
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下: 1. RaisedButton :凸起的按钮; 2. FlatButton :扁平化的按钮; 3....FloatingActionButton:浮动按钮; 按钮组件常见的属性: 1. onPressed 按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2....值的类型为Widget; 3. textColor 文本颜色。值的类型为Colors; 4. color 按钮的颜色。值的类型为Colors; 5. disabledColor 按钮禁用时的颜色。...值的类型为Colors; 6. disabledTextColor 按钮禁用时的文本颜色。值的类型为Colors; 7. splashColor 点击按钮时水波纹的颜色。...值的类型为Colors; 8. highlightColor 长按按钮后按钮的颜色。值的类型为Colors; 9. elevation 阴影的范围。
和尚在尝试做主题颜色切换时,希望背景色有一个自然的过渡过程,于是了解到 ColorTween 颜色补间差值器,配合 AnimationController 实现两种颜色间的自然过渡;和尚简单尝试一下...lerp(double t) => Color.lerp(begin, end, t); } 案例源码 和尚预先设置好需要主题颜色切换的 UI Widget,之后通过混入 TickerProviderStateMixin...StatelessWidget 与 Row 类似,作为一个存放子 Widget 的容器,其中包括了类似于对齐方式等属性方便应用;和尚简单理解为变形的 Row,实际是继承自 Flex 的 _ButtonBarRow...01'), onPressed: null), RaisedButton(child: Text('Button 02'), onPressed: null), RaisedButton...01'), onPressed: null), RaisedButton(child: Text('Button 02'), onPressed: null), RaisedButton
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下: 1. RaisedButton 凸起的按钮; 2. FlatButton 扁平化的按钮; 3....FloatingActionButton 浮动按钮; 按钮组件常见的属性: 1. onPressed 按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2.... child 子组件; 3. textColor 文本颜色; 4. color 按钮的颜色; 5. disabledColor 按钮禁用时的颜色; 6. disabledTextColor 按钮禁用时的文本颜色...; 7. splashColor 点击按钮时水波纹的颜色; 8. highlightColor 长按按钮后按钮的颜色; 9. elevation 阴影的范围; 10. padding 内边距; 11....shape 按钮的形状。
OutlineButton 外边框按钮,可设置按钮外边框颜色。 ButtonBar 水平布局的按钮容器,可放置多个Button或Text。...lButton.icon() 带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮。...new RaisedButton( child: new Text('RaisedButton'), onPressed: () {},...: () {}, ), 3.6、OutlineButton 外边框按钮,可设置按钮外边框颜色。...], ), 3.8、Button.icon 带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮
key: key); @override Widget build(BuildContext context) { // TODO: implement build return RaisedButton...: Colors.white, //设置文本颜色 elevation: 5, //设置按钮阴影 //设置按钮的圆角...borderRadius: BorderRadius.circular(50)), splashColor: Colors.red, //长按水波纹的颜色...RaisedButton.icon( icon: Icon(Icons.search), label: Text...decoration: InputDecoration( hintText: "请输入密码", ), // 监听文本框的值变化
(onPressed: _BtnClick, child: Text("RaisedButton / 漂浮按钮"),), ), // 扁平按钮...( child: Text("自定义 RaisedButton"), onPressed: _BtnClick,...this.width, //图片的宽 this.height, //图片高度 this.color, //图片的混合色值 this.colorBlendMode, //混合模式 this.fit...// 输入框控制器设置 controller: _accountController, // 输入框文字变化监听...、提示文字颜色后(下划线已隐藏) ---- ----
( child: Text("RaisedButton"), onPressed: () => print('RaisedButton'),...@required this.onPressed, //按钮点击回调 this.textColor, //按钮文字颜色 this.disabledTextColor, //按钮禁用时的文字颜色...this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮按下时的背景颜色 this.splashColor...color: Color(0x000000) 即可 FlatButton 是没有 阴影的,这样总会感觉差了点啥,如果需要阴影,可直接使用 RaisedButton 即可 const RaisedButton...this.elevation = 2.0, //正常状态下的阴影 this.highlightElevation = 8.0,//按下时的阴影 this.disabledElevation =
(builder: (context) => FormPage(title: "我是跳转传值",))); //命名路由的写法...child: Text("有颜色按钮"), color: Colors.blue, textColor:...Colors.white, onPressed: () { print("有颜色按钮"); },...Colors.red, //选中的颜色 type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮 items: [...欢迎关注我的微信公众号:安卓圈
老孟导读:Flutter中路由是非常重要的部分,任何一个应用程序都离不开路由管理,此文讲解路由相关方法的使用和路由堆栈的变化。...(context).pop(); }, ) 路由堆栈的变化: ?...A,调用 pop 后,路由堆栈变化: ?...路由堆栈变化: ?...第二种:通过命名路由设置参数的方式: A 页面传递数据, RaisedButton( child: Text('A 页面'), onPressed: () { Navigator.of(
theme 字段值的 ThemeData 组件中的 fontFamily 字段设置字体 , 这里设置在 pubspec.yaml 配置文件中配置的 family 标签下的值 “RubikMonoOne”...// 设置主题 theme: ThemeData( // 配置字体 fontFamily: "RubikMonoOne", // 配置主题颜色...child: Text("通过路由名跳转到页面1"), ), RaisedButton( onPressed:...}, child: Text("通过路由名跳转到页面3"), ), RaisedButton( onPressed...) 博客源码快照 : https://download.csdn.net/download/han1202012/15602328 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
图片的颜色混合模式.png ---- Row和Column应该说是非常常用的控件,其中有几个属性挺重要, 本文最后,我将对Flex布局(Row和Column的父类)进行细致的讲解,希望你不要错过。...--BoxFit 也许你为了查看模式,改一次,看一次,千万不要这样,即费时间,比较的效果又差 你需要学会用数组或map去动态生成,让变化去应对变化,才能以不变应万变。...图片的颜色混合模式.png 重复模式,脑子想想也就知道了,这里就不演示了 ---- 1.4:使用Image的方法加载图片 这个等到文件读取再提一下,基本字段和Image是一样的,所以不用担心。...--凸起的按钮 RaisedButton和Android的内置Button基本上是一致的 1.1源码一览: const RaisedButton({ @required VoidCallback...RaisedButton var raisedButton = RaisedButton( onPressed: () {}, child: Text("Toly"), color: Color
1 RaisedButton RaisedButton组件主要用于文本布局。...2 构造函数 RaisedButton({ Key key, @required VoidCallback onPressed, ValueChanged onHighlightChanged...必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式 3.2 textColor:文本颜色 textColor: Colors.white, 3.3 color:按钮颜色...color: Colors.red, 3.4 splashColor:点击按钮时水波纹的颜色 splashColor: Colors.black, 3.5 highlightColor:高亮颜色,点击...(长按)按钮后的颜色 highlightColor: Colors.green, 3.6 padding:内边距,其接收值的类型是EdgeInsetsGeometry类型的 3.6.1 一次性设置上下左右的间距
相信大家当初在从 Flutter 1 切换到 Flutter 2 的时候,应该都有过这样一个疑问: 为什么 FlatButton 和 RaisedButton 会被弃用替换成 TextButton 和...RaisedButton ?...pressed:通过鼠标、键盘或者触摸等方法发起的轻击或点击 dragged:用户长按并移动控件时 error:错误状态下,比如 TextField 的 Error 所以现在理解了吧?...withOpacity(0.38) 变化颜色; _TextButtonDefaultOverlay: 用于处理 hovered 、 focused 和 pressed ,通过 primary.withOpacity...变化颜色; _TextButtonDefaultMouseCursor : 用于处理鼠标 MouseCursor 的 disabled; 剩下的参则是通过我们熟悉的 ButtonStyleButton.allOrNull
实现 通过颜色改变实现透明度渐变效果 本文章将实现通过 FadeTransition 实现透明度渐变动画效果,实现效果如下 [在这里插入图片描述] 如上图所示效果,使用 FadeTransition...AnimationController 继承于 Animation,所以在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律。...controller的变化的最小值 lowerBound: 0.0, ///controller变化的最大值 upperBound: 1.0,...省略 } 然后在点击按钮时开始动画 如下: RaisedButton( child: Text('正向开启动画'), onPressed: () { ///重置动画...,是由不透明变为透明的过渡,然后再由1.0~0.0 是由不透明变为透明的过渡 ,反向执行一下就可以,代码如下: RaisedButton( child: Text('反向开启动画'),
老 孟 一枚 有态度 的程序员 ?...根据设计的不同,我们可以选择Material风格的AlertDialog或者Cupertino(ios)风格的CupertinoAlertDialog, Material风格基础用法如下: RaisedButton...Cupertino(ios)风格基础用法如下: RaisedButton( child: Text('切换'), onPressed: () { showCupertinoDialog(..., ) AlertDialog的属性相对比较丰富,可以设置title样式、content样式、背景颜色、阴影值,设置是形状: AlertDialog( title: Text('提示'),...用户点击“取消”或者“确定”按钮后退出对话框,App需要知道知道用户选择了哪个选项,用法如下: RaisedButton( child: Text('切换'), onPressed: () async
领取专属 10元无门槛券
手把手带您无忧上云