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, //按钮的背景颜色
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 阴影的范围。
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: () {},
和尚在尝试做主题颜色切换时，希望背景色有一个自然的过渡过程，于是了解到 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(
图片的颜色混合模式.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 一次性设置上下左右的间距
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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
相信大家当初在从 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
老 孟 一枚 有态度 的程序员 ?...根据设计的不同，我们可以选择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
实现 通过颜色改变实现透明度渐变效果 本文章将实现通过 FadeTransition 实现透明度渐变动画效果，实现效果如下 [在这里插入图片描述] 如上图所示效果，使用 FadeTransition...AnimationController 继承于 Animation，所以在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律。...controller的变化的最小值 lowerBound: 0.0, ///controller变化的最大值 upperBound: 1.0,...省略 } 然后在点击按钮时开始动画 如下： RaisedButton( child: Text('正向开启动画'), onPressed: () { ///重置动画...，是由不透明变为透明的过渡，然后再由1.0~0.0 是由不透明变为透明的过渡 ，反向执行一下就可以，代码如下： RaisedButton( child: Text('反向开启动画'),
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
