Flutter开发·几个Flutter中小众又很实用的组件介绍~
发布网友
发布时间：2天前
共1个回答
热心网友
时间：2天前
都说Flutter中一切都是Widget，可见Flutter中的组件也是非常丰富的，本文介绍几个很少被提起但是又很使用的Flutter自带控件。
SelectableTextSelectableText可以实现类似H5中长按选择文本并复制功能的组件，自带选择复制功能，并且可以指定是否显示光标以及光标颜色等属性值。
设置光标显示并指定宽高、颜色、圆角样式：
SelectableText("Flutter中小众且实用的组件",showCursor:true,cursorColor:Colors.green,cursorRadius:Radius.circular(5),cursorWidth:5,cursorHeight:30,style:TextStyle(fontSize:22),)当文本高度显示不下时，默认就会有滚动效果,通过设置scrollPhysics:NeverScrollableScrollPhysics(),也可以禁止掉滚动效果。
SelectableText还自带了onTap点击事件回调，我们可以通过传递此参数来获取文本的点击监听。同时SelectableText也支持富文本，用起来和Text.Rich是一样的，此控件在资讯、社交类APP中是非常实用的。
ReorderableListViewReorderableListView可以用来实现列表拖拽重排序功能。
ReorderableListView(children:list.map((e)=>Container(color:Colors.black12,padding:EdgeInsets.all(20),key:ValueKey(e),child:Text("$e",style:TextStyle(fontSize:22)))).toList(),onReorder:(oldIndex,newIndex){print("把第$oldIndex项移动到第$newIndex项");},)onReorder属性是拖拽完成的回调，方法中的两个参数分别是被拖拽的项在拖拽前和拖拽后的位置，其他属性基本和listview相同。
RotatedBoxRotatedBox用来给子组件实现控件的旋转显示效果，其中quarterTurns属性1代表旋转1/4,2代表旋转2/4，也就是说这个属性设置1和5的效果是一样的。
RotatedBox(quarterTurns:1,child:Text("这是使用RotatedBox的效果"),),他与另外一个旋转组件Transform.rotate的区别是RotatedBox在绘制阶段进行变换，会影响到组件方向改变后的布局大小和位置。如下：这是都没有设置角度的效果：
这是同时将文本内容旋转90°的效果，可以看到使用Transform.rotate时文本的宽高是没有变化的，而使用RotatedBox时文本的宽高则发生了变化。
InteractiveViewerInteractiveViewer是一个可以让用户利用手势将界面进行放大缩小移动的组件。
InteractiveViewer(child:Container(color:Colors.red,width:300,height:300,child:Text("Flutter中小众且实用的组件""Flutter中小众且实用的组件""Flutter中小众且实用的组件""Flutter中小众且实用的组件""Flutter中小众且实用的组件",style:TextStyle(fontSize:22),),))相关属性：
panEnabled：是否启用平移效果
scaleEnabled：是否启用缩放效果
maxScale：最大缩放比例，默认2.5
minScale：最小缩放比例，默认0.8
alignPanAxis：是否只在竖直或水平方向上进行平移，设置为true时无法沿着对角线方向进行平移。
onInteractionEnd：平移或缩放手势结束的回调
onInteractionStart：平移或缩放手势开始的回调
onInteractionUpdate：当平移手势开始后并且手势有更新时的回调
transformationController：手势移动缩放的控制器，通常需要在代码中控制平移缩放时使用。
ShaderMaskShaderMask可以为控件加上渐变效果，其中的属性shaderCallback可以返回LinearGradient、RadialGradient、SweepGradient任何一种。
ShaderMask(shaderCallback:(val){returnRadialGradient(center:Alignment.center,radius:1.0,colors:[Colors.blue,Colors.red],).createShader(val);},blendMode:BlendMode.srcATop,child:Text("Flutter中小众且实用的组件",style:TextStyle(fontSize:32)),),)ShaderMask(shaderCallback:(Rectbounds){returnLinearGradient(begin:Alignment.topCenter,end:Alignment.bottomCenter,colors:[Colors.blue,Colors.red],).createShader(bounds);},blendMode:BlendMode.color,child:Image.asset('assets/image/heart.png',),)