Flutter 는 Clipper 를 통 해 다양한 사용자 정의 모양 의 예제 코드 를 구현 합 니 다.
ClipOval 원형 재단
ClipOval(
child: SizedBox(
width: 120.0,
height: 120.0,
child: Image.asset(
Config.assets_avatar_1,
),
),
);
CircleAvatar 원형 프로필 사진
CircleAvatar(
radius: 60.0,
backgroundImage: AssetImage(
Config.assets_avatar_1,
),
);
컨테이너 장식 장식 모양BoxShape.circle 을 통 해 원형 그림 구현
Container(
width: 120.0,
height: 120.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
Config.assets_avatar_1,
),
),
)
);
BorderRadius 를 통 해 원형 이미지 구현
Container(
width: 120.0,
height: 120.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(60.0)),
image: DecorationImage(
image: AssetImage(
Config.assets_avatar_1,
),
),
),
)
ClipPath 경로 편집
ClipPath(
clipper: TriangleClipper(ClipperPosition.LeftTop),
child: Container(
width: 16.0,
height: 16.0,
decoration: BoxDecoration(
color: Colors.blue,
),
),
);
enum ClipperPosition {
LeftTop,
RightTop,
}
class TriangleClipper extends CustomClipper<Path> {
final ClipperPosition position;
TriangleClipper(this.position);
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(0.0, 0.0);
if (position == ClipperPosition.LeftTop) {
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height);
} else if (position == ClipperPosition.RightTop) {
path.lineTo(size.width, 0.0);
path.lineTo(0.0, size.height);
}
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
}
ClipRect 사각형 커팅
Container(
alignment: Alignment.topCenter,
color: Colors.transparent,
child: Container(
color: Colors.green,
child: ClipRect(
clipper: _RectClipper(20.0),
child: Image.asset(
Config.assets_avatar_1,
width: 160.0,
height: 160.0,
fit: BoxFit.fill,
),
),
),
);
class _RectClipper extends CustomClipper<Rect> {
/// Remove side of size
final double removeSize;
_RectClipper(this.removeSize);
@override
Rect getClip(Size size) {
return new Rect.fromLTRB(
removeSize,
removeSize,
size.width - removeSize,
size.height - removeSize,
);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
return false;
}
}
ClipRRRect 사각형 커팅
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(16.0)),
child: Image.asset(
Config.assets_avatar_1,
fit: BoxFit.fill,
width: 120.0,
height: 120.0,
),
);
스타 평가(CustomPaint)평가 컨트롤채점 컨트롤 UI 그림
실현 방안
Custom Paint 를 사용 하여 ClipPath 와 결합 하여 하나의 오각별 그리 기;
4.567917.Stack 을 사용 하여 2 층 화면 을 렌 더 링 합 니 다배경 층,회색 오각별 일렬 전경 층,밝 은 색 의 오각별 한 줄,그리고 ClipRect 를 사용 하여 일정한 폭 을 캡 처 합 니 다구현 코드
class StarRatingDemo extends StatefulWidget {
@override
_StarRatingDemoState createState() => _StarRatingDemoState();
}
class _StarRatingDemoState extends State<StarRatingDemo> {
/// ClipPath Star Rating
_buildClipPathStarRating(double rate, int count) {
return Container(
padding: EdgeInsets.fromLTRB(24.0, 16.0, 24.0, 0.0),
child: StaticRatingBar(
size: 50.0,
rate: rate,
count: count,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Star Rating'),
),
body: ListView(
physics: BouncingScrollPhysics(),
children: <Widget>[
// _buildClipPathStarRating(1.0, 1),
_buildClipPathStarRating(0.5, 5),
_buildClipPathStarRating(2.0, 5),
_buildClipPathStarRating(3.0, 5),
_buildClipPathStarRating(4.0, 5),
_buildClipPathStarRating(5.0, 5),
_buildClipPathStarRating(5.5, 6),
SizedBox(height: 16.0),
],
),
);
}
}
class StaticRatingBar extends StatelessWidget {
/// Number of stars
final int count;
/// Init rate
final double rate;
/// Size of the starts
final double size;
final Color colorLight;
final Color colorDark;
StaticRatingBar({
this.rate = 5,
this.colorLight = const Color(0xFF1E88E5),
this.colorDark = const Color(0xFFEEEEEE),
this.count = 5,
this.size = 60,
});
Widget buildDarkStar() {
return SizedBox(
width: size * count,
height: size,
child: CustomPaint(
painter: _PainterStars(
count: count,
color: colorDark,
strokeWidth: 0.0,
size: this.size / 2,
style: PaintingStyle.fill,
),
),
);
}
Widget buildLightStar() {
return ClipRect(
clipper: _RatingBarClipper(rate * size),
child: SizedBox(
height: size,
width: size * count,
child: CustomPaint(
painter: _PainterStars(
count: count,
strokeWidth: 0.0,
color: colorLight,
size: this.size / 2,
style: PaintingStyle.fill,
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
buildDarkStar(),
buildLightStar(),
],
);
}
}
class _RatingBarClipper extends CustomClipper<Rect> {
final double width;
_RatingBarClipper(this.width);
@override
Rect getClip(Size size) {
return Rect.fromLTRB(0.0, 0.0, width, size.height);
}
@override
bool shouldReclip(_RatingBarClipper oldClipper) {
return false;
}
}
class _PainterStars extends CustomPainter {
final double size;
final int count;
final Color color;
final PaintingStyle style;
final double strokeWidth;
_PainterStars({
this.size,
this.count,
this.color,
this.strokeWidth,
this.style,
});
double degree2Radian(int degree) {
return (pi * degree / 180);
}
Path createStarPath(double radius, Path path) {
double radian = degree2Radian(36);
double radiusIn = (radius * sin(radian / 2) / cos(radian)) * 1.1;
path.moveTo((radius * cos(radian / 2)), 0.0);
path.lineTo(
(radius * cos(radian / 2) + radiusIn * sin(radian)),
(radius - radius * sin(radian / 2)),
);
path.lineTo(
(radius * cos(radian / 2) * 2),
(radius - radius * sin(radian / 2)),
);
path.lineTo(
(radius * cos(radian / 2) + radiusIn * cos(radian / 2)),
(radius + radiusIn * sin(radian / 2)),
);
path.lineTo(
(radius * cos(radian / 2) + radius * sin(radian)),
(radius + radius * cos(radian)),
);
path.lineTo((radius * cos(radian / 2)), (radius + radiusIn));
path.lineTo(
(radius * cos(radian / 2) - radius * sin(radian)),
(radius + radius * cos(radian)),
);
path.lineTo(
(radius * cos(radian / 2) - radiusIn * cos(radian / 2)),
(radius + radiusIn * sin(radian / 2)),
);
path.lineTo(0.0, (radius - radius * sin(radian / 2)));
path.lineTo(
(radius * cos(radian / 2) - radiusIn * sin(radian)),
(radius - radius * sin(radian / 2)),
);
path.lineTo((radius * cos(radian / 2)), 0.0);
return path;
}
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.strokeWidth = strokeWidth;
paint.color = color;
paint.style = style;
Path path = Path();
double offset = strokeWidth > 0 ? strokeWidth + 2 : 0.0;
path = createStarPath(this.size - offset, path);
for (int i = 0; i < count - 1; i++) {
path = path.shift(Offset(this.size * 2, 0.0));
path = createStarPath(this.size - offset, path);
}
if (offset > 0) {
path = path.shift(Offset(offset, offset));
}
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(_PainterStars oldDelegate) {
return oldDelegate.size != this.size;
}
}
코드 주소https://github.com/smiling1990/FlutterClipper
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Flutter】DateTime 전월의 일수를 취득한다달의 일수를 취득할 필요가 있어, 의외로 수요 있을까라고 생각했으므로 비망록 정도에 남겨 둡니다. DateTime 날짜에 0을 입력하면 전월 DateTime이 됩니다. 2021년 3월 0일 = 2021년 2월 28일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.