我有一個特殊的剪刀形式（圖片）
我想在它周圍創建一個陰影。為此，我嘗試了這個：
Material(
elevation: 10,
child: ClipPath(
clipper: RoundedDiagonalPathClipper(),
child: Transform.scale(
scaleX: 1,
scaleY: -1,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
25.0,
),
),
color: Colors.white,
),
...... more code, not important for this ....
但隨后它會在特殊表單周圍創建一個普通容器。我找到了“剪輯行為”選項，但我不知道這是否是我的解決方案。你能幫我嗎？或者有沒有其他方法可以在這個框周圍創建陰影？
uj5u.com熱心網友回復：
一個簡單的方法是創建一個Shadow并通過偏移量移動你的剪裁器。
像這樣創建一個ClipShadowPath類。
import 'package:flutter/material.dart';
@immutable
class ClipShadowPath extends StatelessWidget {
final Shadow shadow;
final CustomClipper<Path> clipper;
final Widget child;
ClipShadowPath({
@required this.shadow,
@required this.clipper,
@required this.child,
});
@override
Widget build(BuildContext context) {
return CustomPaint(
key: UniqueKey(),
painter: _ClipShadowShadowPainter(
clipper: this.clipper,
shadow: this.shadow,
),
child: ClipPath(child: child, clipper: this.clipper),
);
}
}
class _ClipShadowShadowPainter extends CustomPainter {
final Shadow shadow;
final CustomClipper<Path> clipper;
_ClipShadowShadowPainter({@required this.shadow, @required this.clipper});
@override
void paint(Canvas canvas, Size size) {
var paint = shadow.toPaint();
var clipPath = clipper.getClip(size).shift(shadow.offset);
canvas.drawPath(clipPath, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
這是用法：
Widget buildBodyWidget(BuildContext context) {
return ClipShadowPath(
////*** Your Custom clip path *****
clipper: RoundedDiagonalPathClipper(),
/// Blur property of Shadow class
shadow: Shadow(
blurRadius: 5
),
child: Transform.scale(
scaleX: 1,
scaleY: -1,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
25.0,
),
),
color: Colors.white,
),
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/517366.html
標籤：扑镖用户界面前端