david1465833828/TPSchedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add elastic glass dock motion and Android tablet layouts

Browse Source
This commit is contained in:
david1465833828
2026-10-28 11:09:43 +08:00
parent fbcb7fb637
commit 9da5864d29
16 changed files with 1321 additions and 874 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/lib/widgets/adaptive_page.dart
+28
View File
@@ -0,0 +1,28 @@
import 'dart:math' as math;
import 'package:flutter/widgets.dart';
/// Fits the current window, retaining child state during split-screen resizing.
class AdaptivePage extends StatelessWidget {
const AdaptivePage({super.key, required this.child, this.maxWidth = 840});
final Widget child;
final double maxWidth;
@override
Widget build(BuildContext context) => LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
final contentWidth = width >= 600
? math.min(maxWidth, width - 32)
: width;
return Align(
alignment: Alignment.topCenter,
child: SizedBox(
width: contentWidth,
height: constraints.maxHeight,
child: child,
),
);
},
);
}
mobile/lib/widgets/glass_dock.dart
+254 -197
View File
@@ -19,7 +19,9 @@ class GlassDock extends StatefulWidget {
}
class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
static const _width = 264.0, _height = 58.0, _inset = 3.0, _travel = 86.0;
static const _height = 58.0, _inset = 3.0;
double _width = 264;
double get _travel => (_width - _inset * 2) / 3;
static const _blue = Color(0xFF007AFF);
late final AnimationController _motion = AnimationController.unbounded(
vsync: this,
@@ -29,9 +31,30 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
vsync: this,
value: 0,
);
late final AnimationController _tap = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 460),
);
late final AnimationController _sway = AnimationController.unbounded(
vsync: this,
);
void _swayTo(double target) {
if (_reduceMotion) {
_sway.value = 0;
return;
}
_sway.animateWith(
SpringSimulation(
const SpringDescription(mass: 1, stiffness: 220, damping: 18),
_sway.value,
target,
_sway.velocity.clamp(-12, 12),
),
);
}
bool _reduceMotion = false;
late int _targetIndex;
bool _elasticMotion = false;
@override
void initState() {
super.initState();
@@ -58,42 +81,48 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
void didChangeDependencies() {
super.didChangeDependencies();
_reduceMotion = MediaQuery.disableAnimationsOf(context);
if (_reduceMotion) {
_motion.value = widget.selectedIndex.toDouble();
_press.value = 0;
_tap.value = 0;
_sway.value = 0;
}
}
double? _drag;
double _dragSpeed = 0;
double get _position => _drag ?? _motion.value.clamp(-0.12, 2.12);
void _moveTo(int index, {bool elastic = false, double velocity = 0}) {
void _moveTo(int index, {double velocity = 0}) {
_targetIndex = index;
_elasticMotion = elastic && !_reduceMotion;
if (_reduceMotion) {
_motion.value = index.toDouble();
return;
}
if (elastic) {
_motion.animateWith(
SpringSimulation(
const SpringDescription(mass: 1, stiffness: 380, damping: 19),
_position,
index.toDouble(),
velocity.clamp(-8, 8),
),
);
} else {
_motion.animateTo(
_motion.animateWith(
SpringSimulation(
const SpringDescription(mass: 1, stiffness: 360, damping: 26),
_position,
index.toDouble(),
duration: const Duration(milliseconds: 320),
curve: Curves.easeOutCubic,
);
}
velocity,
),
);
}
void _select(int index, {bool elastic = false, double velocity = 0}) {
final position = _position;
final releaseVelocity = elastic
? velocity.clamp(-8.0, 8.0)
: _motion.velocity;
setState(() => _drag = null);
_motion.value = position;
_moveTo(index, elastic: elastic, velocity: velocity);
_moveTo(index, velocity: releaseVelocity);
// Retarget the position spring without resetting an in-flight size pulse.
// Restarting that pulse at its peak made the glass edges jump on quick taps.
if (!elastic && !_reduceMotion && !_tap.isAnimating) {
_tap.forward(from: 0);
}
_pressTo(0);
_swayTo(0);
widget.onSelected(index);
}
@@ -103,7 +132,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
// The parent acknowledges onSelected with a rebuild. Restarting here used
// to erase the release velocity and start a second spring for the same tab.
if (widget.selectedIndex != _targetIndex && _drag == null) {
_moveTo(widget.selectedIndex);
_moveTo(widget.selectedIndex, velocity: _motion.velocity);
}
}
@@ -111,6 +140,8 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
void dispose() {
_motion.dispose();
_press.dispose();
_tap.dispose();
_sway.dispose();
super.dispose();
}
@@ -162,194 +193,220 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
}
@override
Widget build(BuildContext context) => AnimatedBuilder(
animation: Listenable.merge([_motion, _press]),
builder: (context, _) {
final press = _pressure;
final speed = _reduceMotion
? 0.0
: (_drag != null
? _dragSpeed
: _elasticMotion
? _motion.velocity
: 0.0)
.abs();
final stretch = (speed / 16).clamp(0.0, 0.14) + press * 0.30;
final lensWidth = _travel * (1 + stretch);
final lensHeight =
(_height - _inset * 2) *
(1 + press * 0.31 - (speed / 16).clamp(0.0, 0.07));
return SizedBox(
width: _width,
height: _height,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: const Color(0xFF4C6078).withValues(alpha: 0.075),
blurRadius: 18,
offset: const Offset(0, 6),
Widget build(BuildContext context) => LayoutBuilder(
builder: (context, constraints) {
_width = math.min(
constraints.maxWidth,
MediaQuery.sizeOf(context).width >= 600 ? 300.0 : 264.0,
);
return AnimatedBuilder(
animation: Listenable.merge([_motion, _press, _tap, _sway]),
builder: (context, _) {
final press = _pressure;
final pulse = _reduceMotion ? 0.0 : math.sin(math.pi * _tap.value);
final speed = _reduceMotion
? 0.0
: (_drag != null ? _dragSpeed : _motion.velocity).abs();
final stretch =
(speed / 80).clamp(0.0, 0.08) + pulse * 0.10 + press * 0.30;
final lensWidth = _travel * (1 + stretch);
final lensHeight =
(_height - _inset * 2) *
(1 +
press * 0.31 +
pulse * 0.08 -
(speed / 180).clamp(0.0, 0.035));
// Resize real glass bounds: sampling stays aligned without scaling text.
final sway = _reduceMotion ? 0.0 : _sway.value.clamp(-1.2, 1.2);
final bodyGrowth = press * 12 + pulse * 3 + sway.abs() * 4;
final bodyHeight =
_height + press * 5 + pulse * 1.5 - sway.abs() * 0.8;
final bodyShift =
(_position - 1).clamp(-1.0, 1.0) * press * 2 + sway * 2.5;
return SizedBox(
width: _width,
height: _height,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: const Color(0xFF4C6078).withValues(alpha: 0.075),
blurRadius: 18,
offset: const Offset(0, 6),
),
],
),
],
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(child: _glass(child: const SizedBox.expand())),
Positioned(
left: (_inset + _position * _travel - (lensWidth - _travel) / 2)
.clamp(1.0, _width - lensWidth - 1),
top: (_height - lensHeight) / 2,
width: lensWidth,
height: lensHeight,
child: IgnorePointer(
child: _glass(lens: true, child: const SizedBox.expand()),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: -bodyGrowth / 2 + bodyShift,
top: (_height - bodyHeight) / 2,
width: _width + bodyGrowth,
height: bodyHeight,
child: _glass(child: const SizedBox.expand()),
),
Positioned(
left:
(_inset +
_position * _travel -
(lensWidth - _travel) / 2)
.clamp(1.0, _width - lensWidth - 1),
top: (_height - lensHeight) / 2,
width: lensWidth,
height: lensHeight,
child: IgnorePointer(
child: _glass(lens: true, child: const SizedBox.expand()),
),
),
Positioned(
left: _inset,
right: _inset,
top: _inset,
bottom: _inset,
child: Row(
children: [
_item(0, Icons.calendar_month_rounded, '课表'),
_item(1, Icons.assignment_rounded, '考试'),
_item(2, Icons.person_rounded, '个人设置', caption: '我的'),
],
),
),
],
),
Positioned(
left: _inset,
right: _inset,
top: _inset,
bottom: _inset,
child: Row(
children: [
_item(0, Icons.calendar_month_rounded, '课表'),
_item(1, Icons.assignment_rounded, '考试'),
_item(2, Icons.person_rounded, '个人设置', caption: '我的'),
],
),
),
],
),
),
),
);
},
);
},
);
Widget _item(
int index,
IconData icon,
String label, {
String? caption,
}) => Expanded(
child: Semantics(
label: label,
button: true,
selected: index == widget.selectedIndex,
excludeSemantics: true,
onTap: () => _select(index),
child: GestureDetector(
key: index == widget.selectedIndex ? const Key('dock-cursor') : null,
behavior: HitTestBehavior.opaque,
onTapDown: index == widget.selectedIndex ? (_) => _pressTo(1) : null,
onTapCancel: () {
if (_drag == null) _pressTo(0);
},
onTap: () => _select(index),
onHorizontalDragStart: index == widget.selectedIndex
? (_) {
final start = _position.clamp(0.0, 2.0);
_motion.stop();
_pressTo(1);
setState(() {
_drag = start;
_dragSpeed = 0;
});
}
: null,
onHorizontalDragUpdate: index == widget.selectedIndex
? (details) => setState(() {
_dragSpeed = details.delta.dx / _travel * 60;
_drag = (_position + details.delta.dx / _travel).clamp(
0.0,
2.0,
);
})
: null,
onHorizontalDragEnd: index == widget.selectedIndex
? (details) => _select(
_position.round().clamp(0, 2),
elastic: true,
velocity: details.velocity.pixelsPerSecond.dx / _travel,
)
: null,
onHorizontalDragCancel: index == widget.selectedIndex
? () {
if (!mounted) return;
final position = _position;
setState(() => _drag = null);
_motion.value = position;
_moveTo(widget.selectedIndex, elastic: true);
_pressTo(0);
}
: null,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedScale(
scale: index == _position.round().clamp(0, 2)
? 1 + _pressure * 0.08
: 1,
duration: const Duration(milliseconds: 130),
child: Icon(
icon,
size: 25,
color: index == _position.round().clamp(0, 2)
? _blue
: _blue.withValues(alpha: 0.72),
shadows: [
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.60
: 0.38,
),
blurRadius: 8,
),
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.95
: 0.85,
),
blurRadius: 2.8,
),
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.34
: 0.22,
),
blurRadius: 1.4,
),
],
),
),
const SizedBox(height: 2),
Flexible(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
caption ?? label,
maxLines: 1,
style: TextStyle(
fontSize: 11,
height: 1.1,
fontWeight: FontWeight.w600,
Widget _item(int index, IconData icon, String label, {String? caption}) =>
Expanded(
child: Semantics(
label: label,
button: true,
selected: index == widget.selectedIndex,
excludeSemantics: true,
onTap: () => _select(index),
child: GestureDetector(
key: index == widget.selectedIndex
? const Key('dock-cursor')
: null,
behavior: HitTestBehavior.opaque,
onTapDown: index == widget.selectedIndex
? (_) => _pressTo(_reduceMotion ? 0 : 1)
: null,
onTapCancel: () {
if (_drag == null) _pressTo(0);
},
onTap: () => _select(index),
onHorizontalDragStart: index == widget.selectedIndex
? (_) {
final start = _position.clamp(0.0, 2.0);
_motion.stop();
_pressTo(_reduceMotion ? 0 : 1);
setState(() {
_drag = start;
_dragSpeed = 0;
});
}
: null,
onHorizontalDragUpdate: index == widget.selectedIndex
? (details) => setState(() {
_dragSpeed = details.delta.dx / _travel * 60;
_swayTo((_dragSpeed / 8).clamp(-1.0, 1.0));
_drag = (_position + details.delta.dx / _travel).clamp(
0.0,
2.0,
);
})
: null,
onHorizontalDragEnd: index == widget.selectedIndex
? (details) => _select(
_position.round().clamp(0, 2),
elastic: true,
velocity: details.velocity.pixelsPerSecond.dx / _travel,
)
: null,
onHorizontalDragCancel: index == widget.selectedIndex
? () {
if (!mounted) return;
final position = _position;
setState(() => _drag = null);
_motion.value = position;
_moveTo(widget.selectedIndex);
_pressTo(0);
_swayTo(0);
}
: null,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedScale(
scale: index == _position.round().clamp(0, 2)
? 1 + _pressure * 0.08
: 1,
duration: const Duration(milliseconds: 130),
child: Icon(
icon,
size: 25,
color: index == _position.round().clamp(0, 2)
? _blue
: _blue.withValues(alpha: 0.62),
: _blue.withValues(alpha: 0.72),
shadows: [
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.60
: 0.38,
),
blurRadius: 8,
),
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.95
: 0.85,
),
blurRadius: 2.8,
),
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.34
: 0.22,
),
blurRadius: 1.4,
),
],
),
),
),
const SizedBox(height: 2),
Flexible(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
caption ?? label,
maxLines: 1,
style: TextStyle(
fontSize: 11,
height: 1.1,
fontWeight: FontWeight.w600,
color: index == _position.round().clamp(0, 2)
? _blue
: _blue.withValues(alpha: 0.62),
),
),
),
),
],
),
],
),
),
),
),
),
);
);
}
/// A white, rounded bevel catches light around a translucent milky body.