changed scaling grid style to match content

This commit is contained in:
Thibault Deckers 2021-06-06 15:34:46 +09:00
parent b539597c62
commit d0fe4ee1c3
4 changed files with 35 additions and 23 deletions

View file

@ -54,7 +54,7 @@ class _CollectionGridState extends State<CollectionGrid> {
settingsRouteKey: widget.settingsRouteKey ?? context.currentRouteName!, settingsRouteKey: widget.settingsRouteKey ?? context.currentRouteName!,
columnCountDefault: 4, columnCountDefault: 4,
extentMin: 46, extentMin: 46,
spacing: 0, spacing: 2,
); );
return TileExtentControllerProvider( return TileExtentControllerProvider(
controller: _tileExtentController!, controller: _tileExtentController!,
@ -191,13 +191,12 @@ class _CollectionScaler extends StatelessWidget {
scrollableKey: scrollableKey, scrollableKey: scrollableKey,
appBarHeightNotifier: appBarHeightNotifier, appBarHeightNotifier: appBarHeightNotifier,
gridBuilder: (center, extent, child) => CustomPaint( gridBuilder: (center, extent, child) => CustomPaint(
// painting the thumbnail half-border on top of the grid yields artifacts, painter: GridPainter(
// so we use a `foregroundPainter` to cover them instead
foregroundPainter: GridPainter(
center: center, center: center,
extent: extent, extent: extent,
spacing: tileSpacing, spacing: tileSpacing,
strokeWidth: DecoratedThumbnail.borderWidth * 2, borderWidth: DecoratedThumbnail.borderWidth,
borderRadius: Radius.zero,
color: DecoratedThumbnail.borderColor, color: DecoratedThumbnail.borderColor,
), ),
child: child, child: child,

View file

@ -252,15 +252,16 @@ class _ScaleOverlayState extends State<ScaleOverlay> {
class GridPainter extends CustomPainter { class GridPainter extends CustomPainter {
final Offset center; final Offset center;
final double extent, spacing; final double extent, spacing, borderWidth;
final double strokeWidth; final Radius borderRadius;
final Color color; final Color color;
const GridPainter({ const GridPainter({
required this.center, required this.center,
required this.extent, required this.extent,
this.spacing = 0.0, required this.spacing,
this.strokeWidth = 1.0, required this.borderWidth,
required this.borderRadius,
required this.color, required this.color,
}); });
@ -268,7 +269,8 @@ class GridPainter extends CustomPainter {
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
final radius = extent * 3; final radius = extent * 3;
final paint = Paint() final paint = Paint()
..strokeWidth = strokeWidth ..style = PaintingStyle.stroke
..strokeWidth = borderWidth
..shader = ui.Gradient.radial( ..shader = ui.Gradient.radial(
center, center,
radius, radius,
@ -281,18 +283,26 @@ class GridPainter extends CustomPainter {
1, 1,
], ],
); );
void draw(Offset topLeft) {
for (var i = -1; i <= 2; i++) {
final ref = (extent + spacing) * i;
canvas.drawLine(Offset(0, topLeft.dy + ref), Offset(size.width, topLeft.dy + ref), paint);
canvas.drawLine(Offset(topLeft.dx + ref, 0), Offset(topLeft.dx + ref, size.height), paint);
}
}
final topLeft = center.translate(-extent / 2, -extent / 2); // final topLeft = center.translate(-extent / 2, -extent / 2);
draw(topLeft); final delta = extent + spacing;
if (spacing > 0) { for (var i = -2; i <= 2; i++) {
draw(topLeft.translate(-spacing, -spacing)); final dx = delta * i;
for (var j = -2; j <= 2; j++) {
if (i == 0 && j == 0) continue;
final dy = delta * j;
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromCenter(
center: center + Offset(dx, dy),
width: extent,
height: extent,
),
borderRadius,
),
paint,
);
}
} }
} }

View file

@ -77,6 +77,8 @@ class DecoratedFilterChip extends StatelessWidget {
); );
} }
static Radius radius(double extent) => Radius.circular(min<double>(AvesFilterChip.defaultRadius, extent / 4));
Widget _buildChip(CollectionSource source) { Widget _buildChip(CollectionSource source) {
final entry = coverEntry ?? source.coverEntry(filter); final entry = coverEntry ?? source.coverEntry(filter);
final backgroundImage = entry == null final backgroundImage = entry == null
@ -90,9 +92,8 @@ class DecoratedFilterChip extends StatelessWidget {
entry: entry, entry: entry,
extent: extent, extent: extent,
); );
final radius = min<double>(AvesFilterChip.defaultRadius, extent / 4);
final titlePadding = min<double>(4.0, extent / 32); final titlePadding = min<double>(4.0, extent / 32);
final borderRadius = BorderRadius.circular(radius); final borderRadius = BorderRadius.all(radius(extent));
Widget child = AvesFilterChip( Widget child = AvesFilterChip(
filter: filter, filter: filter,
showGenericIcon: false, showGenericIcon: false,

View file

@ -380,6 +380,8 @@ class _FilterScaler<T extends CollectionFilter> extends StatelessWidget {
center: center, center: center,
extent: extent, extent: extent,
spacing: tileSpacing, spacing: tileSpacing,
borderWidth: AvesFilterChip.outlineWidth,
borderRadius: DecoratedFilterChip.radius(extent),
color: Colors.grey.shade700, color: Colors.grey.shade700,
), ),
child: child, child: child,