flutter - 如何在颤动中制作具有圆边的按钮?
问题描述
制作圆角按钮非常简单,但我想制作一个边缘也是圆角的按钮。
也许我应该使用CustomPaint
?
解决方案
SquircleBorder可能会帮助您:
Container(
width: 56.0,
height: 56.0,
child: Material(
color: Colors.blueGrey[400],
shape: SquircleBorder(
side: BorderSide(color: Colors.grey, width: 3.0),
),
child: Icon(Icons.settings),
),
),
class SquircleBorder extends ShapeBorder {
final BorderSide side;
final double superRadius;
const SquircleBorder({
this.side: BorderSide.none,
this.superRadius: 5.0,
})
: assert(side != null),
assert(superRadius != null);
@override
EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);
@override
ShapeBorder scale(double t) {
return new SquircleBorder(
side: side.scale(t),
superRadius: superRadius * t,
);
}
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) {
return _squirclePath(rect.deflate(side.width), superRadius);
}
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
return _squirclePath(rect, superRadius);
}
static Path _squirclePath(Rect rect, double superRadius) {
final c = rect.center;
final dx = c.dx * (1.0 / superRadius);
final dy = c.dy * (1.0 / superRadius);
return new Path()
..moveTo(c.dx, 0.0)
..relativeCubicTo(c.dx - dx, 0.0, c.dx, dy, c.dx, c.dy)
..relativeCubicTo(0.0, c.dy - dy, -dx, c.dy, -c.dx, c.dy)
..relativeCubicTo(-(c.dx - dx), 0.0, -c.dx, -dy, -c.dx, -c.dy)
..relativeCubicTo(0.0, -(c.dy - dy), dx, -c.dy, c.dx, -c.dy)
..close();
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
switch (side.style) {
case BorderStyle.none:
break;
case BorderStyle.solid:
var path = getOuterPath(rect.deflate(side.width / 2.0), textDirection: textDirection);
canvas.drawPath(path, side.toPaint());
}
}
}
推荐阅读
- scala - Scala 的 VSTS 代码覆盖率
- r - 当我尝试在特殊网格上绘制点时,为什么 ggmap plot 说只有缺失值?
- javafx - 记录 TestFX 的 UI 元素
- mysql - Mysql查询计算列中的常见数字
- java - android TV 通过索引以编程方式选择 BrowseSupportFragment/RowsSupportFragment 的项目
- wordpress - Wordpress 圣人引导程序不起作用
- typo3 - 在 TYPO3 的查询中获取不需要的 where 子句
- python - 如何比较包含整数的列表 A 和列表 B 并打印缺失的整数?
- c# - 使用 NoAuth 的 Web 请求
- c# - 为模型绑定到集合类型指定相等比较器