Flutter开发·几个Flutter中小众又很实用的组件介绍~都说Flutter中一切都是Widget，可见Flutt

都说Flutter中一切都是Widget，可见Flutter中的组件也是非常丰富的，本文介绍几个很少被提起但是又很使用的Flutter自带控件。

SelectableText

SelectableText可以实现类似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中是非常实用的。

ReorderableListView

ReorderableListView可以用来实现列表拖拽重排序功能。

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相同。

RotatedBox

RotatedBox用来给子组件实现控件的旋转显示效果，其中quarterTurns属性1代表旋转1/4,2代表旋转2/4，也就是说这个属性设置1和5的效果是一样的。

RotatedBox(quarterTurns:1,child: Text("这是使用RotatedBox的效果"),),

他与另外一个旋转组件Transform.rotate的区别是RotatedBox在绘制阶段进行变换，会影响到组件方向改变后的布局大小和位置。如下： 这是都没有设置角度的效果：

这是同时将文本内容旋转90°的效果，可以看到使用Transform.rotate时文本的宽高是没有变化的，而使用RotatedBox时文本的宽高则发生了变化。

InteractiveViewer

InteractiveViewer是一个可以让用户利用手势将界面进行放大缩小移动的组件。

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：手势移动缩放的控制器，通常需要在代码中控制平移缩放时使用。

ShaderMask

ShaderMask可以为控件加上渐变效果，其中的属性shaderCallback可以返回LinearGradient、RadialGradient、SweepGradient任何一种。

ShaderMask(
  shaderCallback: (val){
    return RadialGradient(
      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: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.blue,Colors.red],
    ).createShader(bounds);
  },
  blendMode: BlendMode.color,
  child: Image.asset(
    'assets/image/heart.png',
  ),
)