[英]How to draw a custom rounded rectangle border (ShapeBorder), in Flutter?
我正在嘗試擴展ShapeBorder
類以添加一些功能。 但是只是玩弄paint
方法,我發現了一些我沒想到的東西:
class CustomRoundedRectangleBorder extends ShapeBorder {
final double borderWidth;
final BorderRadius borderRadius;
const CustomRoundedRectangleBorder({
this.borderWidth: 1.0,
this.borderRadius: BorderRadius.zero,
})
: assert(borderRadius != null);
@override
EdgeInsetsGeometry get dimensions {
return new EdgeInsets.all(borderWidth);
}
@override
ShapeBorder scale(double t) {
return new CustomRoundedRectangleBorder(
borderWidth: borderWidth * (t),
borderRadius: borderRadius * (t),
);
}
@override
ShapeBorder lerpFrom(ShapeBorder a, double t) {
assert(t != null);
if (a is CustomRoundedRectangleBorder) {
return new CustomRoundedRectangleBorder(
borderWidth: ui.lerpDouble(a.borderWidth, borderWidth, t),
borderRadius: BorderRadius.lerp(a.borderRadius, borderRadius, t),
);
}
return super.lerpFrom(a, t);
}
@override
ShapeBorder lerpTo(ShapeBorder b, double t) {
assert(t != null);
if (b is CustomRoundedRectangleBorder) {
return new CustomRoundedRectangleBorder(
borderWidth: ui.lerpDouble(borderWidth, b.borderWidth, t),
borderRadius: BorderRadius.lerp(borderRadius, b.borderRadius, t),
);
}
return super.lerpTo(b, t);
}
@override
Path getInnerPath(Rect rect, { TextDirection textDirection }) {
return new Path()
..addRRect(borderRadius.resolve(textDirection).toRRect(rect).deflate(
borderWidth));
}
@override
Path getOuterPath(Rect rect, { TextDirection textDirection }) {
return new Path()
..addRRect(borderRadius.resolve(textDirection).toRRect(rect));
}
@override
void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {
rect = rect.deflate(borderWidth / 2.0);
Paint paint;
final RRect borderRect = borderRadius.resolve(textDirection).toRRect(rect);
paint = new Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
canvas.drawRRect(borderRect, paint);
}
}
並按如下方式創建矩形:
new Container(
height: 100.0,
width: 200.0,
padding: new EdgeInsets.all(10.0),
decoration: new ShapeDecoration(
color: Colors.black,
shape: new CustomRoundedRectangleBorder(
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
borderWidth: 10.0,
),
// side: new BorderSide(color: Colors.white)
),
child: new Center(child: new Text("My Button"),),
),
我覺得 Flutter 源代碼采用了類似的方法,但也許我沒有看到任何東西。
編輯將我的paint
style
更改為PaintingStyle.fill
從而在原始矩形而不是邊框上繪制一個矩形,我似乎得到了正確的邊框:
void paint(Canvas canvas, Rect rect, { TextDirection textDirection }) {
// rect = rect.deflate(borderWidth / 2.0);
Paint paint;
final RRect borderRect = borderRadius.resolve(textDirection).toRRect(rect);
paint = new Paint()
..color = Colors.red.withOpacity(0.25)
..style = PaintingStyle.fill
..strokeWidth = borderWidth;
canvas.drawRRect(borderRect, paint);
}
我仍然對如何做到這一點感到困惑......
你應該使用 canvas.drawPath 而不是 drawRect
Paint paint = new Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
canvas.drawPath(getOuterPath(rect), paint);
另外如果你只想要一個邊框,它足以使用
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) {
return new Path()
..fillType = PathFillType.evenOdd
..addPath(getOuterPath(rect), Offset.zero);
}
您可以使用canvas.drawRRect
:
canvas.drawRRect(RRect.fromRectAndRadius(Rect.fromLTWH(size.width / 2 - gap - smallMarkWidth - 15,gap * 8,gap + 70,gap * 5,),Radius.circular(15.0)),backgroundPaint);
您可以使用ClipRRect小部件代替 drawRect,它使用起來很簡單。
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(),
),
繪制帶有陰影的自定義圓形邊框。
new Container(
decoration:
new BoxDecoration(
borderRadius: new BorderRadius.circular(10.0),
color: Colors.white,
boxShadow: [
new BoxShadow(
color: Colors.grey,
blurRadius: 3.0,
offset: new Offset(1.0, 1.0))
],
),
)
繪制沒有陰影的自定義圓形邊框。
new Container(
decoration:
new BoxDecoration(
borderRadius: new BorderRadius.circular(10.0),
color: Colors.grey,
),
)
這對我有用!
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration:
ShapeDecoration(
shape: RoundedRectangleBorder(
side:new BorderSide(color: Color(0xFF2A8068)),
borderRadius: new BorderRadius.all(new Radius.circular(4))),
color: Color(0xFF2A8068)),
child: Theme(
data: Theme.of(context).copyWith(
buttonTheme: ButtonTheme.of(context).copyWith(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)),
child: OutlineButton(
shape: RoundedRectangleBorder(
side:new BorderSide(color: Color(0xFF2A8068)), //the outline color
borderRadius: new BorderRadius.all(new Radius.circular(4))),
child: Text(
"ابدأ", //your text here
style: new TextStyle(
color: Colors.white, //your textColor
),
),
onPressed: () => {},
),
),
);
我基於@Bram Vanbilsen 的代碼發布了一個簡單的包,它使您可以控制如何繪制形狀以及以您想要的方式繪制邊框。
該包可以在 pub.dev 上找到: https ://pub.dev/packages/custom_rounded_rectangle_border
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.