Flutter实现矩形取色器的封装

作者:风向决定发型M 时间:2023-06-19 04:08:47 

前言

最近看插件库上少有的取色器大都是圆形的或者奇奇怪的的亚子,所以今天做两个矩形的颜色取色器

提示:以下是本篇文章正文内容,下面案例可供参考

一、BarTypeColorPicker

条形选色板的功能实现,颜色的获取是通过位置来判断,然后赋予相应的颜色。这个封装好的组件可通过colorListener、onTapUpListener的回调方法,把颜色传出去。

代码如下(示例):


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///描述:条形选色板

class BarTypeColorPicker extends StatefulWidget {
 final Color initialColor;
 final ValueChanged<Color> colorListener;
 final ValueChanged<Color> onTapUpListener;
 final int colorWidth;
 final int colorHeight;
 final Color color;

const BarTypeColorPicker(
     {Key key,
     this.initialColor,
     this.colorListener,
     this.onTapUpListener,
     this.colorWidth,
     this.colorHeight,
     this.color})
     : super(key: key);

@override
 _BarTypeColorPickerState createState() => _BarTypeColorPickerState(
       colorWidth.toDouble(),
       colorHeight.toDouble(),
     );
}

class _BarTypeColorPickerState extends State<BarTypeColorPicker> {
 double _top = 0.0;
 double _left = 0.0;
 double _Thumbsize = 20;
 double lightness;
 double _colorwidth;
 double _colorHeight;
 Color _color;

_BarTypeColorPickerState(double colorwidth, double colorHeight) {
   this._colorwidth = colorwidth;
   this._colorHeight = colorHeight;
 }

@override
 void initState() {
   super.initState();
 }

@override
 Widget build(BuildContext context) {
   return Center(
     child: GestureDetector(
       onPanStart: (DragStartDetails detail) {
         var localPosition = detail.localPosition;
         buildSetState(localPosition, context);
         if (widget.colorListener != null) {
           widget.colorListener(_color);
         }
       },
       onPanDown: (DragDownDetails detail) {
         var localPosition = detail.localPosition;
         buildSetState(localPosition, context);
         if (widget.colorListener != null) {
           widget.colorListener(_color);
         }
       },
       onPanUpdate: (DragUpdateDetails detail) {
         var localPosition = detail.localPosition;
         buildSetState(localPosition, context);
         if (widget.colorListener != null) {
           widget.colorListener(_color);
         }
       },
       onPanEnd: (DragEndDetails detail) {
         if (widget.onTapUpListener != null) {
           widget.onTapUpListener(_color);
         }
       },
       onTapUp: (TapUpDetails detail) {
         if (widget.onTapUpListener != null) {
           widget.onTapUpListener(_color);
         }
       },
       child: ColorRect(
           colorHeight: _colorHeight,
           colorwidth: _colorwidth,
           top: _top,
           Thumbsize: _Thumbsize,
           left: _left,
           color: _color),
     ),
   );
 }

void buildSetState(Offset localPosition, BuildContext context) {
   return setState(() {
     _left = localPosition.dx;
     _top = localPosition.dy;
     if (_left < 0) {
       _left = 0;
     } else if (0 <= _left && _left <= _colorwidth) {
       _left = _left;
     } else if (_left > _colorwidth) {
       _left = (_colorwidth);
     }
     if ((_colorwidth / 7) * 0 < _left && _left < (_colorwidth / 7) * 1) {
       _color = Color(0xFFFF0000);
     } else if ((_colorwidth / 7) * 1 < _left &&
         _left < (_colorwidth / 7) * 2) {
       _color = Color(0xFFFFFF00);
     } else if ((_colorwidth / 7) * 2 < _left &&
         _left < (_colorwidth / 7) * 3) {
       _color = Color(0xFF00FF00);
     } else if ((_colorwidth / 7) * 3 < _left &&
         _left < (_colorwidth / 7) * 4) {
       _color = Color(0xFF00FFFF);
     } else if ((_colorwidth / 7) * 4 < _left &&
         _left < (_colorwidth / 7) * 5) {
       _color = Color(0xFF0000FF);
     } else if ((_colorwidth / 7) * 5 < _left &&
         _left < (_colorwidth / 7) * 6) {
       _color = Color(0xFFFF00FF);
     } else if ((_colorwidth / 7) * 6 < _left &&
         _left < (_colorwidth / 7) * 7) {
       _color = Color(0xFFFFFFFF);
     }
     if (_top <= 0) {
       _top = 0;
     } else if (0 <= _top && _top <= _colorHeight) {
     } else if (_top > _colorHeight) {
       _top = _colorHeight;
     }
   });
 }
}

class ColorRect extends StatelessWidget {
 ColorRect({
   Key key,
   @required double colorHeight,
   @required double colorwidth,
   @required double top,
   @required double Thumbsize,
   @required double left,
   @required Color color,
 })  : _colorHeight = colorHeight,
       _colorwidth = colorwidth,
       _top = top,
       _Thumbsize = Thumbsize,
       _left = left,
       _color = color,
       super(key: key);

final double _colorHeight;
 final double _colorwidth;
 final double _top;
 final double _Thumbsize;
 final double _left;
 final Color _color;
 List<Color> colorList = [
   Color(0xFFFF0000),
   Color(0xFFFFFF00),
   Color(0xFF00FF00),
   Color(0xFF00FFFF),
   Color(0xFF0000FF),
   Color(0xFFFF00FF),
   Color(0xFFFFFFFF),
 ];

@override
 Widget build(BuildContext context) {
   return Container(
     width: _colorwidth,
     height: _colorHeight,
     child: Stack(
       children: [
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: colorList
               .map(
                 (e) => Container(
                   padding: EdgeInsets.symmetric(horizontal: 2),
                   height: _colorHeight,
                   width: _colorwidth / 7,
                   child: Container(
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(10),
                       color: e,
                     ),
                   ),
                 ),
               )
               .toList(),
         ),
         Container(
             child: Thumb(
                 top: _top,
                 Thumbsize: _Thumbsize,
                 left: _left,
                 color: _color)),
       ],
     ),
   );
 }
}

class Thumb extends StatelessWidget {
 const Thumb({
   Key key,
   @required double top,
   @required double Thumbsize,
   @required double left,
   @required Color color,
 })  : _top = top,
       _Thumbsize = Thumbsize,
       _left = left,
       _color = color,
       super(key: key);

final double _top;
 final double _Thumbsize;
 final double _left;
 final Color _color;

@override
 Widget build(BuildContext context) {
   return Positioned(
       top: _top - _Thumbsize / 2,
       left: _left - _Thumbsize / 2,
       child: GestureDetector(
           child: Container(
         child: Icon(
           Icons.circle,
           color: _color,
           size: _Thumbsize,
         ),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
           boxShadow: [
             BoxShadow(
               blurRadius: 0.1, //阴影范围
               spreadRadius: 0.001, //阴影浓度
               color: Colors.black, //阴影颜色
             ),
           ],
         ),
       )));
 }
}

下面是使用方法。


BarTypeColorPicker(
  initialColor: Colors.white,
  colorWidth: 360,
  colorHeight: 150,
),

具体效果图:

Flutter实现矩形取色器的封装

一、RectangleColorPicker

矩形选色板的功能实现,颜色的获取是通过位置的坐标值转换为相应的颜色。这个封装好的组件可通过colorListener、onTapUpListener的回调方法,把颜色传出去。

代码如下(示例):


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RectangleColorPicker extends StatefulWidget {
 final Color initialColor;
 final ValueChanged<Color> colorListener;
 final ValueChanged<Color> onTapUpListener;
 final int colorWidth;
 final int colorHeight;
 final Color color;

const RectangleColorPicker(
     {Key key,
     this.initialColor,
     this.colorListener,
     this.onTapUpListener,
     this.colorWidth,
     this.colorHeight,
     this.color})
     : super(key: key);

@override
 _RectangleColorPickerState createState() => _RectangleColorPickerState(
       colorWidth.toDouble(),
       colorHeight.toDouble(),
     );
}

class _RectangleColorPickerState extends State<RectangleColorPicker> {
 double _top = 0.0;
 double _left = 0.0;
 double _Thumbsize = 20;
 double _hue = 0.0;
 double _brightnum = 50.0;
 double lightness;
 double _colorwidth;
 double _colorHeight;

_RectangleColorPickerState(double colorwidth, double colorHeight) {
   this._colorwidth = colorwidth;
   this._colorHeight = colorHeight;
 }

Color get _color {
   return HSLColor.fromAHSL(
     1,
     _hue,
     1,
     lightness,
   ).toColor();
   //返回HSL、AHSL格式的色调亮度字符串
 }

@override
 void initState() {
   super.initState();
   HSLColor hslColor = HSLColor.fromColor(widget.initialColor);
   _left = (_colorwidth * hslColor.hue) / 360;
   _top = (_colorHeight * (hslColor.lightness - 0.5) * 200) / 100;
   this._hue = hslColor.hue;
   this.lightness = hslColor.lightness;
 }

@override
 Widget build(BuildContext context) {
   return Center(
     child: GestureDetector(
       onPanStart: (DragStartDetails detail) {
         var localPosition = detail.localPosition;
         buildSetState(localPosition, context);
         if(widget.colorListener != null){
           widget.colorListener(_color);
         }

},
       onPanDown: (DragDownDetails detail) {
         var localPosition = detail.localPosition;
         buildSetState(localPosition, context);
         if(widget.colorListener != null){
           widget.colorListener(_color);
         }
       },
       onPanUpdate: (DragUpdateDetails detail) {
         //获取当前触摸点的局部坐标
         var localPosition = detail.localPosition;
         buildSetState(localPosition, context);
         if(widget.colorListener != null){
           widget.colorListener(_color);
         }

},
       onPanEnd: (DragEndDetails detail) {
         if(widget.onTapUpListener != null){
           widget.onTapUpListener(_color);
         }
       },
       onTapUp: (TapUpDetails detail){
         if(widget.onTapUpListener != null){
           widget.onTapUpListener(_color);
         }
       },
       child: ColorRect(
           colorHeight: _colorHeight,
           colorwidth: _colorwidth,
           top: _top,
           Thumbsize: _Thumbsize,
           left: _left,
           color: _color),
     ),
   );
 }

void buildSetState(Offset localPosition, BuildContext context) {
   return setState(() {
     _left = localPosition.dx;
     _top = localPosition.dy;
     if (_left < 0) {
       _left = 0;
     } else if (0 <= _left && _left <= _colorwidth) {
       _left = _left;
       _hue = (360 * _left) / (_colorwidth);
     } else if (_left > _colorwidth) {
       _left = (_colorwidth);
       _hue = 360;
     }
     if (((5 / 360 - 5 / 360) < _left &&
             _left < (5 / 360 + 5 / 360) * _colorwidth) &&
         (_top < 5)) {
       _left = 5 / 360 * _colorwidth;
       _top = 0;
     } else if ((((5 + 350 / 6) / 360 - 5 / 360) * _colorwidth < _left &&
             _left < ((5 + 350 / 6) / 360 + 5 / 360) * _colorwidth) &&
         (_top < 5)) {
       _left = (5 + (1 * 350) / 6) / 360 * _colorwidth;
       _top = 0;
     } else if ((((5 + (2 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
             _left < ((5 + (2 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
         (_top < 5)) {
       _left = (5 + (2 * 350) / 6) / 360 * _colorwidth;
       _top = 0;
     } else if ((((5 + (3 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
             _left < ((5 + (3 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
         (_top < 5)) {
       _left = (5 + (3 * 350) / 6) / 360 * _colorwidth;
       _top = 0;
     } else if ((((5 + (4 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
             _left < ((5 + (4 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
         (_top < 5)) {
       _left = (5 + (4 * 350) / 6) / 360 * _colorwidth;
       _top = 0;
     } else if ((((5 + (5 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
             _left < ((5 + (5 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
         (_top < 5)) {
       _left = (5 + (5 * 350) / 6) / 360 * _colorwidth;
       _top = 0;
     } else if ((((5 + (6 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
             _left < ((5 + (6 * 350) / 6) / 360 + 5 / 360)) &&
         (_top < 5)) {
       _left = (5 + (6 * 350) / 6) / 360 * _colorwidth;
       _top = 0;
     }
     if (_top <= 0) {
       _top = 0;
       _brightnum = 50;
       lightness = _brightnum / 100;
     } else if (0 <= _top && _top <= _colorHeight) {
       _brightnum = (100 * _top) / _colorHeight / 2 + 50;
       lightness = _brightnum / 100;
     } else if (_top > _colorHeight) {
       _top = _colorHeight;
       _brightnum = 100;
       lightness = _brightnum / 100;
     }
   });
 }
}

class ColorRect extends StatelessWidget {
 const ColorRect({
   Key key,
   @required double colorHeight,
   @required double colorwidth,
   @required double top,
   @required double Thumbsize,
   @required double left,
   @required Color color,
 })  : _colorHeight = colorHeight,
       _colorwidth = colorwidth,
       _top = top,
       _Thumbsize = Thumbsize,
       _left = left,
       _color = color,
       super(key: key);

final double _colorHeight;
 final double _colorwidth;
 final double _top;
 final double _Thumbsize;
 final double _left;
 final Color _color;

@override
 Widget build(BuildContext context) {
   return Container(
     child: Stack(
       children: [
         Container(
           child: ClipRRect(
             borderRadius: BorderRadius.circular(10),
             child: DecoratedBox(
                 child: Container(
                   height: _colorHeight,
                   width: _colorwidth,
                 ),
                 decoration: BoxDecoration(
                   gradient: LinearGradient(
                     begin: Alignment.centerLeft,
                     end: Alignment.centerRight,
                     stops: [
                       0,
                       5 / 360,
                       (5 + 350 / 6) / 360,
                       (5 + (2 * 350) / 6) / 360,
                       (5 + (3 * 350) / 6) / 360,
                       (5 + (4 * 350) / 6) / 360,
                       (5 + (5 * 350) / 6) / 360,
                       (5 + (6 * 350) / 6) / 360,
                       1.0
                     ],
                     colors: [
                       Color.fromARGB(255, 255, 0, 0),
                       Color.fromARGB(255, 255, 0, 0),
                       Color.fromARGB(255, 255, 255, 0),
                       Color.fromARGB(255, 0, 255, 0),
                       Color.fromARGB(255, 0, 255, 255),
                       Color.fromARGB(255, 0, 0, 255),
                       Color.fromARGB(255, 255, 0, 255),
                       Color.fromARGB(255, 255, 0, 0),
                       Color.fromARGB(255, 255, 0, 0),
                     ],
                   ),
                 )),
           ),
         ),
         Container(
           child: ClipRRect(
             borderRadius: BorderRadius.circular(10),
             child: DecoratedBox(
                 child: Container(
                   height: _colorHeight,
                   width: _colorwidth,
                 ),
                 decoration: BoxDecoration(
                   gradient: LinearGradient(
                     begin: Alignment.topCenter,
                     end: Alignment.bottomCenter,
                     colors: [
                       Color.fromARGB(0, 255, 255, 255),
                       Colors.white,
                     ],
                   ),
                 )),
           ),
         ),
         Container(
             child: Thumb(
                 top: _top,
                 Thumbsize: _Thumbsize,
                 left: _left,
                 color: _color)),
       ],
     ),
   );
 }
}

class Thumb extends StatelessWidget {
 const Thumb({
   Key key,
   @required double top,
   @required double Thumbsize,
   @required double left,
   @required Color color,
 })  : _top = top,
       _Thumbsize = Thumbsize,
       _left = left,
       _color = color,
       super(key: key);

final double _top;
 final double _Thumbsize;
 final double _left;
 final Color _color;

@override
 Widget build(BuildContext context) {
   return Positioned(
       top: _top - _Thumbsize / 2,
       left: _left - _Thumbsize / 2,
       child: GestureDetector(
           child: Container(
         child: Icon(
           Icons.circle,
           color: _color,
           size: _Thumbsize,
         ),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
           boxShadow: [
             BoxShadow(
               blurRadius: 0.1, //阴影范围
               spreadRadius: 0.001, //阴影浓度
               color: Colors.black, //阴影颜色
             ),
           ],
         ),
       )));
 }
}

下面是使用方法。


RectangleColorPicker(
  [initialColor: Colors.white,
  colorWidth: 360,
  colorHeight: 150,
  onTapUpListener: (_color) { }
  colorListener: (_color) { }
  ]
),

具体效果图:

Flutter实现矩形取色器的封装

来源:https://blog.csdn.net/weixin_43758044/article/details/115761710

标签:Flutter,取色器
0
投稿

猜你喜欢

  • 在Flutter中制作翻转卡片动画的完整实例代码

    2023-06-23 23:31:21
  • flutter实现appbar下选项卡切换

    2023-06-21 13:35:24
  • Flutter app页面路由以及路由拦截的实现

    2023-06-23 14:21:18
  • Flutter 通过Clipper实现各种自定义形状的示例代码

    2023-06-19 14:25:11
  • Android开发组件flutter的20个常用技巧示例总结

    2023-06-19 17:25:23
  • 详解Flutter中视频播放器插件的使用教程

    2023-06-15 23:47:31
  • flutter ExpansionTile 层级菜单的实现

    2023-06-15 16:04:01
  • flutter material widget组件之信息展示组件使用详解

    2023-06-22 08:45:35
  • Flutter实现抽屉动画

    2023-06-18 01:49:19
  • Flutter开发中的路由参数处理

    2023-06-21 04:27:48
  • Flutter 使用fluro的转场动画进行页面切换

    2023-06-17 11:49:26
  • Flutter路由传递参数及解析实现

    2023-06-22 11:48:45
  • 使用Flutter实现一个走马灯布局的示例代码

    2023-06-19 03:50:03
  • 使用flutter创建可移动的stack小部件功能

    2023-06-21 12:28:25
  • Flutter网络请求的3种简单实现方法

    2023-06-21 10:53:22
  • 替换so文件来动态替换Flutter代码实现详解

    2023-06-23 16:24:06
  • Flutter 容器盒子模型的使用示例

    2023-06-18 18:47:43
  • Flutter应用集成极光推送的实现示例

    2023-06-24 03:51:04
  • 基于Flutter实现多边形和多角星组件

    2023-06-19 06:02:50
  • Swift洗牌动画效果的实现方法

    2023-06-21 14:01:56
  • asp之家 软件编程 m.aspxhome.com