建设网站有什么要素构成,唯美谷网站建设,网站建设深圳公司哪家好,海外加速器Button 在日常中是必不可少的#xff0c;小菜尝试过不同类型的 Button#xff0c;也根据需求自定义过#xff0c;今天小菜系统的学习一下最基本的 Button#xff1b;Flutter 中没有 Button Widget#xff0c;但提供了很多不同类型的 Child Button Widget#xff1b;小菜分…Button 在日常中是必不可少的小菜尝试过不同类型的 Button也根据需求自定义过今天小菜系统的学习一下最基本的 ButtonFlutter 中没有 Button Widget但提供了很多不同类型的 Child Button Widget小菜分析源码整体可分为 RawMaterialButton 和 IconButton 两类其中 RaisedButton / FlatButton / OutlineButton 继承自 MaterialButton 且 MaterialButton 是对 RawMaterialButton 的封装而BackButton / CloseButton / PopupMenuButton 继承自 IconButton最终 RawMaterialButton 和 IconButton 都是由 ConstrainedBox 填充绘制IconButton 系列IconButton 系列属于图标按钮使用相对简单其核心是 InkResponse 水波纹效果IconButton源码分析const IconButton({Key key,this.iconSize 24.0, // 图标大小this.padding const EdgeInsets.all(8.0), // 图标周围间距this.alignment Alignment.center, // 图标位置required this.icon, // 图标资源this.color, // 图标颜色this.highlightColor, // 点击高亮颜色this.splashColor, // 水波纹颜色this.disabledColor, // 不可点击时高亮颜色required this.onPressed,this.tooltip // 长按提示})分析源码其中 icon 和 onPressed 是必须要设置的其余属性根据需求而适当调整案例尝试小菜首先尝试最基本的 IconButton长按会由 tooltip 提醒点击为默认主题色IconButton(icon: Icon(Icons.android), tooltip: IconButton tootip1,onPressed: () Toast.show(IconButton, context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM));小菜尝试其中几个属性其中 icon 颜色为 cyan点击高亮背景色为 deepPurple水波纹颜色为 redAccent注意当 icon 自身设置颜色时 color 属性不生效IconButton(icon: Icon(Icons.android), tooltip: IconButton tootip2,color: Colors.cyan,highlightColor: Colors.deepPurple.withOpacity(0.4),splashColor: Colors.redAccent,onPressed: () Toast.show(IconButton, context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM));小菜尝试不可点击时icon 颜色为 disabledColor 设置的 green同样若 icon 本身设置了颜色disabledColor 不生效注意onPressed: null 与 onPressed: () null 不同前者代表无点击事件后者代表有点击事件只是点击无操作IconButton(icon: Icon(Icons.android), disabledColor: Colors.green, onPressed: null);icon 为 Widget 采用 Icon / Image / ImageIcon 等均可IconButton(icon: Image.asset(images/ic_launcher.png), iconSize: 40.0, onPressed: null);BackButtonBackButton 作用非常明确一般用作返回上一个页面源码分析const BackButton({ Key key, this.color })分析源码BackButton 继承自 IconButton只允许设置图标颜色图标样式 Android 与 iOS 不同且不可修改点击时会优先判断 maybePop 是否可以返回上一页案例尝试BackButton();BackButton(color: Colors.green);CloseButtonCloseButton 一般用作导航栏关闭按钮与 BackButton 类似源码分析const CloseButton({ Key key }) : super(key: key);分析源码CloseButton 继承自 IconButton无需设置任何属性点击时会优先判断 maybePop 是否可以返回上一页案例尝试CloseButton();RawMaterialButton 系列RawMaterialButtonRawMaterialButton 是 MaterialButton 的基础核心是由 Material 和 InkWell 等组成但不可用当前 Theme 或 ButtonTheme 来计算未指定参数的默认值源码分析const RawMaterialButton({Key key,required this.onPressed,this.onHighlightChanged, // 高亮变化的回调this.textStyle, // 文字属性this.fillColor, // 填充颜色this.highlightColor, // 背景高亮颜色this.splashColor, // 水波纹颜色this.elevation 2.0, // 阴影this.highlightElevation 8.0, // 高亮时阴影this.disabledElevation 0.0, // 不可点击时阴影this.padding EdgeInsets.zero, // 内容周围边距this.constraints const BoxConstraints(minWidth: 88.0, minHeight: 36.0), // 默认按钮尺寸this.shape const RoundedRectangleBorder(), // 形状样式this.animationDuration kThemeChangeDuration, // 动画效果持续时长this.clipBehavior Clip.none, // 抗锯齿剪切效果MaterialTapTargetSize materialTapTargetSize, // 点击目标的最小尺寸this.child,})分析源码可知RawMaterialButton 没有设置宽高的属性可根据 padding 或外层依赖 Container 适当调整位置和大小默认最小尺寸为 88px * 36px案例尝试小菜定义了一个基本的按钮并监听其高亮改变时状态与我们常见的按钮基本一致RawMaterialButton(padding: EdgeInsets.all(20.0),child: Row(mainAxisSize: MainAxisSize.min, children: [Padding(child: Icon(Icons.android), padding: EdgeInsets.only(right: 10.0)),Text(RawMaterialButton, style: TextStyle(color: Colors.brown))]),textStyle: TextStyle(color: Colors.pink, fontSize: 18.0),fillColor: Colors.greenAccent.withOpacity(0.4),highlightColor: Colors.cyan,splashColor: Colors.deepPurple.withOpacity(0.4),onPressed: () Toast.show(RawMaterialButton, context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM),onHighlightChanged: (state) Toast.show(onHighlightChanged - $state, context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER))FloatingActionButtonFloatingActionButton 是 RawMaterialButton 的封装主要用于浮动在屏幕内容之上一般是位于底部左右角或中间一般一个页面只有一个源码分析const FloatingActionButton({Key key,this.child,this.tooltip, // 长按提醒this.foregroundColor, // 按钮上子元素颜色this.backgroundColor, // 背景色this.heroTag const _DefaultHeroTag(), // Hero 动画标签this.elevation 6.0, // 阴影this.highlightElevation 12.0, // 高亮时阴影required this.onPressed,this.mini false, // 尺寸大小分为 mini 和 defaultthis.shape const CircleBorder(), // 样式形状this.clipBehavior Clip.none, // 抗锯齿剪切效果this.materialTapTargetSize, // 点击目标的最小尺寸this.isExtended false, // 是否采用 .extended 方式})案例尝试小菜尝试一个基本的 FloatingActionButton长按会有 tooltip 提示floatingActionButton: FloatingActionButton(child: Icon(Icons.android), tooltip: FloatingActionButton ToolTip,onPressed: () Toast.show(FloatingActionButton, context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM));foregroundColor 为按钮上层子元素颜色若子元素本身设置颜色则不生效backgroundColor 为按钮背景色foregroundColor: Colors.redAccent.withOpacity(0.7),backgroundColor: Colors.green.withOpacity(0.4),elevation 按钮默认阴影高度即 z轴高度highlightElevation 为点击高亮时阴影高度elevation: 0.0,highlightElevation: 10.0,mini 是否展示成小尺寸模式materialTapTargetSize 为配置目标的最小点击尺寸padded 为默认的 48px * 48px 为 Android 推荐尺寸shrinkWrap 为缩小到 Material 提供的最小尺寸mini: true,materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,shape 为样式尺寸clipBehavior 为抗锯齿效果shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))),clipBehavior: Clip.antiAlias,heroTag 动画标签默认的是 FloatingActionButtonAnimator.scaling且 heroTag 默认是相同的可以自定义为唯一标签小菜设置上一页面与当前页面 FloatingActionButton 的 heroTag 相同floatingActionButtonAnimator: MyAnimation(),heroTag: aceTag,class MyAnimation extends FloatingActionButtonAnimator {double _x, _y;overrideOffset getOffset({Offset begin, Offset end, double progress}) {_x begin.dx (end.dx - begin.dx) * progress;_y begin.dy (end.dy - begin.dy) * progress;return Offset(_x * 0.5, _y * 0.9);}overrideAnimation getRotationAnimation({Animation parent}) {return Tween(begin: 1.0, end: 1.0).animate(parent);}overrideAnimation getScaleAnimation({Animation parent}) {return Tween(begin: 1.0, end: 1.0).animate(parent);}}FloatingActionButton 提供了 .extended 方式创建代表标签样式的非正方形的按钮样式其余属性无差floatingActionButton: FloatingActionButton.extended(onPressed: () Toast.show(FloatingActionButton.extended, context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM),icon: Icon(Icons.android),label: Text(Android));针对特殊的个性化FloatingActionButton 展示的大小可能会有所不同小菜尝试了几种方式a. 通过最基本的 RawMaterialButton 实现 FloatingActionButton 样式外层添加 Container 约束大小小菜比较推荐方式一灵活性更高// 方式一floatingActionButton: Container(width: 100.0, height: 100.0,color: Colors.greenAccent.withOpacity(0.4),child: RawMaterialButton(shape: CircleBorder(),elevation: 0.0,child: Icon(Icons.android),onPressed: () {}))b. 借助 FittedBox 将按钮整体放大到 Container 约束范围内// 方式二floatingActionButton: Container(width: 100.0, height: 100.0,child: FittedBox(child: FloatingActionButton(child: Icon(Icons.android), onPressed: () {})))c. SizeBox 与 FittedBox 约束方式不同只是整体范围变大其内部按钮按 Material 建议样式展示// 方式三floatingActionButton: SizedBox(width: 100.0, height: 100.0,child: FloatingActionButton(child: Icon(Icons.android), onPressed: () {}))d. scale 与 FittedBox 类似按比例缩放// 方式四floatingActionButton: Transform.scale(scale: 1.5,child: FloatingActionButton(child: Icon(Icons.android), onPressed: () {}))Button 涉及的内容较多扩展性很强小菜分两节进行学习尝试有些理解可能还不到位有问题请多多指导来源 阿策小和尚
