Flutter-3D标签云效果实现效果图：
调⽤
import 'package:flutter/material.dart';
import 'package:jh_flutter_demo/base_appbar.dart';
import 'tag_cloud_widget.dart';
var _data = [
{"ID": "111", "name": "1.这是⽂字", "num": "11"},
{"ID": "222", "name": "2.这是⽂", "num": "22"},
{"ID": "333", "name": "3.这是⽂字⽂字", "num": "33"},
{"ID": "444", "name": "4.这是⽂字", "num": "44"},
{"ID": "555", "name": "5.这是⽂字", "num": "55"},
{"ID": "666", "name": "6.这是", "num": "66"},
{"ID": "777", "name": "7.这是⽂字", "num": "77"},
{"ID": "888", "name": "8.这是⽂字", "num": "88"},
];
class TagCloudPage extends StatefulWidget {
@override
_TagCloudPageState createState() => _TagCloudPageState();
}
class _TagCloudPageState extends State<TagCloudPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: backAppBar(context, 'TagCloudWidget'),
backgroundColor: Color(0xFFF8F8F8),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: TagCloudWidget(400, _data, rpm: 3)));
}
}
样式 是 通过 TextPainter 和 canvas 组合实现的， TextPainter 展⽰的⽂字，canvas 添加的圆⾓矩形⼀些样式的实现
fontweight默认值
TagCloudWidget使⽤的
// TextPainter 富⽂本加边框
var text = TextPainter(
textAlign: ,
text: TextSpan(
text: '${data['name']}\n',
style: TextStyle(fontSize: _fontSize, color: _textColor_row1),
children: <TextSpan>[
TextSpan(
text: data['num'],
style:
TextStyle(fontSize: _fontSize, color: _textColor_row2),
recognizer: TapGestureRecognizer()
..onTap = () {
print('===测试暂时有误，待研究==');
}),
]),
textDirection: TextDirection.ltr)
.
.layout(maxWidth: 200, minWidth: 80)
..paint(canvas, Offset(point.x, point.y));
paintStyle.strokeWidth = _boderWidth;
//  正⽅形
//      canvas.drawRect(Rect.fromCircle(center:Offset(point.x+text.width/2, point.y+20),radius:text.width/2), paintStyle);
//长⽅形
//      canvas.drawRect(Rect.fromCenter(center:Offset(point.x+text.width/2, point.y+15),width: text.width,height: 50), paintStyle);
//圆⾓矩形
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromCenter(
center: Offset(point.x + text.width / 2, point.y + 15),
width: text.width,
height: 50),
Radius.circular(_boderRadius)),
paintStyle);
其他
/********************************* canvas  绘制球 ********************************/
// canvas  绘制球
var opacity = _getOpacity(point.z / size.width * 2);
paintStyle.style = PaintingStyle.fill;
var r = _getScale(point.z / size.width * 2) * radius;
canvas.drawCircle(Offset(point.x, point.y), r, paintStyle);
/********************************* canvas  绘制⽂字 ********************************/
// canvas  绘制⽂字
ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
textAlign: ,
fontWeight: FontWeight.w300,
fontStyle: al,
fontSize: 12.0,
));
pb.pushStyle(
ui.TextStyle(fontSize: 15, color: d),
);
pb.addText('ABCDE');
ParagraphConstraints pc = ParagraphConstraints(width: 30);
//这⾥需要先layout, 后⾯才能获取到⽂字⾼度
Paragraph paragraph = pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(point.x, point.y));
/********************************* TextPainter 富⽂本 ********************************/
/********************************* TextPainter 富⽂本 ********************************/
// TextPainter  富⽂本
TextPainter(
text: TextSpan(
text: '这是⽂字',
style: TextStyle(fontSize: 13.0, color: Colors.white)),
textDirection: TextDirection.ltr)
..layout(maxWidth: 100, minWidth: 50)
..paint(canvas, Offset(point.x, point.y));
/********************************* TextPainter 富⽂本多个 ********************************/
// TextPainter 富⽂本多个
TextPainter(
text: TextSpan(
text: '这是',
style: TextStyle(fontSize: 13.0, color: Colors.white),
children: <TextSpan>[
TextSpan(
text: '红⾊',
style: TextStyle(fontSize: 18.0, color: d)),
TextSpan(
text: '⿊⾊',
style: TextStyle(fontSize: 12.0, color: Colors.black),
//                    recognizer: TapGestureRecognizer()
//                      ..onTap = () {
/
/                        print('===测试暂时有误，待研究==');
//                      }
recognizer: new TapGestureRecognizer()..onTap = () => print('Tap Here onTap'),
),
]),
textDirection: TextDirection.ltr)
..layout(maxWidth: 100, minWidth: 50)
..paint(canvas, Offset(point.x, point.y));
/******************************** canvas ⽂字加边框长⽅形 *********************************/
// canvas  绘制⽂字
ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
textAlign: ,
fontWeight: FontWeight.w300,
fontStyle: al,
fontSize: 12.0,
));
pb.pushStyle(
ui.TextStyle(fontSize: 12, color: Colors.white),
);
pb.addText("这是⽂字⽂字 \n ");
pb.addText('FF');
ParagraphConstraints pc = ParagraphConstraints(width: 90);
Paragraph paragraph = pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(point.x, point.y));
// 长⽅形
canvas.drawRect(Rect.fromCenter(center:Offset(point.x+pc.width/2, point.y+15),width: pc.width,height: 50), paintStyle);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。