[英]How to make a container with inverted rounded corners in Flutter?
as an option (based on @pskink tip)作为选项(基于@pskink 提示)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(appBar: AppBar(), body: Demo()));
}
}
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Container(
width: 300,
height: 200,
margin: const EdgeInsets.only(top: 24, bottom: 16),
decoration: ShapeDecoration(shape: WeirdBorder(radius: 32), color: Colors.red),
),
Container(
width: 200,
height: 100,
margin: const EdgeInsets.only(bottom: 16),
decoration: ShapeDecoration(shape: WeirdBorder(radius: 16, pathWidth: 8), color: Colors.green),
),
Container(
width: 300,
height: 200,
decoration: ShapeDecoration(shape: WeirdBorder(radius: 12, pathWidth: 2), color: Colors.blue),
),
],
),
);
}
}
class WeirdBorder extends ShapeBorder {
final double radius;
final double pathWidth;
WeirdBorder({@required this.radius, this.pathWidth = 1});
@override
EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) {
return Path()
..fillType = PathFillType.evenOdd
..addPath(getOuterPath(rect, textDirection: textDirection), Offset.zero);
}
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) => _createPath(rect);
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}
@override
ShapeBorder scale(double t) => WeirdBorder(radius: radius);
Path _createPath(Rect rect) {
final innerRadius = radius + pathWidth;
final innerRect = Rect.fromLTRB(rect.left + pathWidth, rect.top + pathWidth, rect.right - pathWidth, rect.bottom - pathWidth);
final outer = Path.combine(PathOperation.difference, Path()..addRect(rect), _createBevels(rect, radius));
final inner = Path.combine(PathOperation.difference, Path()..addRect(innerRect), _createBevels(rect, innerRadius));
return Path.combine(PathOperation.difference, outer, inner);
}
Path _createBevels(Rect rect, double radius) {
return Path()
..addOval(Rect.fromCircle(center: Offset(rect.left, rect.top), radius: radius))
..addOval(Rect.fromCircle(center: Offset(rect.left + rect.width, rect.top), radius: radius))
..addOval(Rect.fromCircle(center: Offset(rect.left, rect.top + rect.height), radius: radius))
..addOval(Rect.fromCircle(center: Offset(rect.left + rect.width, rect.top + rect.height), radius: radius));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.