Flutter 自定义Widget 圆角矩形加三角指示器

一般app设计中都会有气泡提示，这个时候就需要用到切图了，在flutter中不管你信不信反正对于.9的这块还是很不友好的，使用起来特别麻烦。要是安卓中这或许会很简单。
但即使支持.9 如果气泡样式很多，对于app的包大小占用其实还是有那么一丢丢的影响的。
我采用了是用代码的方式实现了圆角矩形带三角指示器
现看看效果吧

上面就是ui给出的效果，其中底部的三角形距离左边的位置还是动态可变，背景颜色还是渐变的。
使用了CustomPaint方式实现一套圆角矩形加指示器的控件，下面是代码实现

ExRoundTriangleWidget

import 'dart:math';import 'package:flutter/material.dart';import 'ex_text.dart';/// 圆角矩形 + 三角提示布局
class ExRoundTriangleWidget extends StatelessWidget {/// 子布局final String data; // 文案final TextStyle textStyle;final double roundRadius; // 圆角半径final double triangleWidth; // 三角形的宽度final double triangleHeight; // 三角形的高度final double triangleDistance; // 三角形距离左边的距离final bool triangleFromLeft; // 从左边计算距离final LinearGradient gradient; // 渐变颜色final Color bordColor; // 边框颜色final PaintingStyle paintingStyle; // 是填充还是边框final double strokeWidth; // 画笔宽度final bool isCenter; // 是否居中final double horizontal; // 水平间距ExRoundTriangleWidget({this.data,this.textStyle,this.roundRadius,this.triangleWidth,this.triangleHeight,this.triangleDistance,this.triangleFromLeft,this.gradient,this.bordColor,this.paintingStyle,this.strokeWidth,this.isCenter,this.horizontal});@overrideWidget build(BuildContext context) {return CustomPaint(painter: ExRoundTrianglePainter(roundRadius: roundRadius ?? 12,triangleWidth: triangleWidth ?? 12,triangleHeight: triangleHeight ?? 12,triangleDistance: triangleDistance ?? 8,triangleFromLeft: triangleFromLeft ?? true,gradient: gradient,bordColor: bordColor,paintingStyle: paintingStyle,strokeWidth: strokeWidth,isCenter: isCenter,),child: Row(mainAxisSize: MainAxisSize.min,children: [Container(height: (roundRadius ?? 12) * 2 + (triangleHeight ?? 12),alignment: Alignment.center,child: Container(padding: EdgeInsets.symmetric(horizontal: horizontal),height: (roundRadius ?? 12) * 2,alignment: Alignment.center,child: ExText(data,textStyle,),),),],),);}
}/// 圆角矩形 带有三角指示器
class ExRoundTrianglePainter extends CustomPainter {Paint _paint;final double roundRadius; // 圆角半径final double triangleWidth; // 三角形的宽度final double triangleHeight; // 三角形的高度final double triangleDistance; // 三角形距离左边的距离final bool triangleFromLeft; // 从左边计算距离LinearGradient gradient; // 渐变颜色final Color bordColor; // 边框颜色final PaintingStyle paintingStyle; // 是填充还是边框final double strokeWidth; // 画笔宽度final bool isCenter; // 是否居中final double horizontal; // 水平间距ExRoundTrianglePainter({this.roundRadius = 12,this.triangleWidth = 12,this.triangleHeight = 12,this.triangleDistance = 16,this.triangleFromLeft = true,this.gradient,this.bordColor,this.paintingStyle = PaintingStyle.fill,this.strokeWidth = 1,this.isCenter = false,this.horizontal = 12}) {_paint = Paint()..strokeCap = StrokeCap.butt..isAntiAlias = true //是否启动抗锯齿..style = paintingStyle ?? PaintingStyle.fill //绘画风格，默认为填充..filterQuality = FilterQuality.high //颜色渲染模式的质量..strokeWidth = strokeWidth ?? 15.0 //画笔的宽度..color = bordColor ?? Colors.transparent; // 边框颜色}@overridevoid paint(Canvas canvas, Size size) {final rect = new Rect.fromLTWH(0.0, 0.0, size.width, size.height);if (gradient != null) {_paint.shader = gradient.createShader(rect);}Path path = Path();// 左半圆path.addArc(new Rect.fromLTWH(0, 0, roundRadius * 2, roundRadius * 2), 90.0 * (pi / 180.0), 180.0 * (pi / 180.0));path.lineTo(size.width - roundRadius, 0);// 右半圆path.addArc(new Rect.fromLTWH(size.width - roundRadius * 2, 0, roundRadius * 2, roundRadius * 2),270.0 * (pi / 180.0), 180.0 * (pi / 180.0));double reallyTriangleStartDistance; // 三角形的x轴的起始距离 根据triangleFromLeft计算 从右到左开始的double reallyTriangleCenterDistance; // 三角形的x轴的中见点距离 根据triangleFromLeft计算 从右到左开始的double reallyTriangleEndDistance; // 三角形的x轴的结束距离 根据triangleFromLeft计算 从右到左开始的if (isCenter ?? false) {reallyTriangleStartDistance = size.width / 2 - triangleWidth / 2;reallyTriangleCenterDistance = size.width / 2;reallyTriangleEndDistance = size.width / 2 + triangleWidth / 2;} else {if (triangleFromLeft) {reallyTriangleStartDistance = roundRadius + triangleDistance + triangleWidth;reallyTriangleCenterDistance = reallyTriangleStartDistance - triangleWidth / 2;reallyTriangleEndDistance = reallyTriangleCenterDistance - triangleWidth / 2;} else {reallyTriangleStartDistance = size.width - roundRadius - triangleDistance;reallyTriangleCenterDistance = reallyTriangleStartDistance - triangleWidth / 2;reallyTriangleEndDistance = reallyTriangleCenterDistance - triangleWidth / 2;}}// 三角形path.lineTo(reallyTriangleEndDistance, roundRadius * 2);path.lineTo(reallyTriangleCenterDistance, roundRadius * 2 + triangleHeight);path.lineTo(reallyTriangleStartDistance, roundRadius * 2);path.lineTo(roundRadius, roundRadius * 2);canvas.drawPath(path, _paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}

Flutter 自定义Widget 圆角矩形加三角指示器相关推荐

Flutter 自定义Widget——风车实现
最近在做一个天气模块的时候,风力需要显示一个旋转的风车,实现效果如下: 需求分析我们可以把上面的效果拆分为两个部分实现: 1.画一个风车的FanWidget 2.旋转动画一.风车Widget实现 ...
html矩形加三角,html如何绘制带尖角（三角）的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
Flutter自定义Widget实例 -如何创建炫酷粒子时钟效果！
周末发表了一篇文章<这个项目也太屌了吧>,给大家推荐了一个炫酷的Flutter粒子时钟项目,不过没有将具体实现思路和代码,所幸,作者自己写了一篇博客将这个项目的背景.实现思路.和所遇到的问 ...
Flutter自定义Widget之炫酷粒子时钟效果
周末发表了一篇文章<这个项目也太屌了吧>,给大家推荐了一个炫酷的Flutter粒子时钟项目,不过没有将具体实现思路和代码,所幸,作者自己写了一篇博客将这个项目的背景.实现思路.和所遇到的问 ...
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见学习Dart 基础知识移步这里安装flutter环境相关移步这里 flutter基础组件使用相关移步这里文章目录一 ...
Android开发之自定义圆角矩形图片ImageView
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...
Android自定义圆角矩形图片ImageView
//自定义的圆形的ImageView类的实现代码如下:package com.xc.xcskin.view;import android.content.Context; import android ...
Android开发之自定义圆角矩形图片ImageView的实现 - Jamy Cai
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...
使用Drawable绘制圆角矩形
好久没写布局,突然之间需要写一个,为了美化要进行对四边的圆角处理,自定义一个圆角矩形不值得,于是翻了翻之前的代码,操作一波. 1.在Drawable文件夹下创建一个文件: <?xml versi ...

Flutter 自定义Widget 圆角矩形加三角指示器

Flutter 自定义Widget 圆角矩形加三角指示器相关推荐

最新文章

热门文章