flutter - 如何在颤动中创建一侧倾斜的容器
问题描述
我是 Flutter 的新手。如何创建此处标记的形状?我试过了。下面是代码。
Positioned(
top: 30.0,
left: 15.0,
width: 50.0,
height: 20.0,
child: Container(
decoration: BoxDecoration(
color: Colors.pink,
shape: BoxShape.rectangle
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0,horizontal: 8.0),
child: Text('අලුත්ම පුවත',style: TextStyle(color: Colors.white, fontSize: 10.0,fontWeight: FontWeight.bold)),
),
),
解决方案
您可以使用 clipPath 来实现所需的输出。
以下代码可以帮助您更好地理解。
class DeleteWidget extends StatefulWidget {
@override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ClipPath(
clipper: SkewCut(),
child: Container(
color: Colors.red,
width: 200,
height: 50,
child: Center(child: Text("Hello World")),
),
),
),
);
}
}
class SkewCut extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 0);
path.lineTo(size.width - 20, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(SkewCut oldClipper) => false;
}
推荐阅读
- r - 另一个向量的历史高点向量
- java - com.algorithmia.APIException:308 意外的 API 响应
- html - DOM完全渲染后如何显示按钮
- php - 不在本地主机中打开文件夹
- date-fns - date-fns:parseISO(string) 和 new Date(string) 之间的区别?
- java - 没有得到结果:使用 completableFuture
- sql - 如何在 PrestoDB 中创建一个具有持久值的计算列?
- odata - 如何在自定义 oData 服务中创建 GENERATED_ID 以提供分析表?
- react-native - react-native-audio-toolkit,isPlaying 不起作用
- python - 尝试打印 csv 文件时出现新的 python NameError