79 lines
2.3 KiB
Dart
79 lines
2.3 KiB
Dart
// Author: fruit.com.cn
|
|
|
|
import 'dart:math' as math;
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
/// 首页右上角搜索/礼物图标的自定义样式:
|
|
/// 搜索为粗线条放大镜(Material 图标无法调线条粗细),礼物为 emoji 红金礼盒。
|
|
|
|
/// 粗线条白色放大镜,圆环在左上、手柄朝右下。
|
|
class SearchGlyph extends StatelessWidget {
|
|
const SearchGlyph({super.key, required this.size, required this.color});
|
|
|
|
final double size;
|
|
final Color color;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return CustomPaint(
|
|
size: Size.square(size),
|
|
painter: _SearchPainter(color: color),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SearchPainter extends CustomPainter {
|
|
const _SearchPainter({required this.color});
|
|
|
|
final Color color;
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final stroke = size.width * 0.09;
|
|
final paint = Paint()
|
|
..color = color
|
|
..style = PaintingStyle.stroke
|
|
..strokeWidth = stroke
|
|
..strokeCap = StrokeCap.round;
|
|
|
|
final circleDiameter = size.width * 0.7;
|
|
final direction = math.pi / 4;
|
|
// 图形只占画布左上角,先平移让它视觉居中,否则会比文字基线偏高。
|
|
final drawnExtent =
|
|
circleDiameter / 2 +
|
|
(circleDiameter / 2 + size.width * 0.12) * math.sin(direction) +
|
|
stroke / 2;
|
|
final centering = (size.width - drawnExtent) / 2;
|
|
canvas.translate(centering, centering);
|
|
|
|
final center = Offset(circleDiameter / 2, circleDiameter / 2);
|
|
canvas.drawCircle(center, circleDiameter / 2 - stroke / 2, paint);
|
|
|
|
final start = center + Offset.fromDirection(direction, circleDiameter / 2 - stroke * 0.2);
|
|
final end = center + Offset.fromDirection(direction, circleDiameter / 2 + size.width * 0.12);
|
|
canvas.drawLine(start, end, paint);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant _SearchPainter oldDelegate) =>
|
|
oldDelegate.color != color;
|
|
}
|
|
|
|
/// emoji 礼盒(红盒金丝带,随系统 emoji 风格渲染)。
|
|
class GiftGlyph extends StatelessWidget {
|
|
const GiftGlyph({super.key, required this.size});
|
|
|
|
final double size;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox.square(
|
|
dimension: size,
|
|
child: FittedBox(
|
|
child: Text('🎁', style: TextStyle(fontSize: size, height: 1)),
|
|
),
|
|
);
|
|
}
|
|
}
|