feat(player): 更多面板按参考图重做
This commit is contained in:
Zhou Weidong committed
1 parent
c06a67c4b0
commit
7fccd16750
3 files changed
+260
-131
No files matched your search
@@ -6,12 +6,21 @@ import '../../../core/theme/app_colors.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
|
||||
const double _sheetRadius = 20;
|
||||
const double _rowHeight = 44;
|
||||
const double _rowHeight = 56;
|
||||
const double _groupGap = 12;
|
||||
const double _segmentHeight = 28;
|
||||
const double _groupVerticalPadding = 6;
|
||||
const double _groupRadius = 16;
|
||||
const double _rowHorizontalPadding = 14;
|
||||
const double _rowIconSize = 22;
|
||||
const double _rowIconGap = 14;
|
||||
const double _rowLabelSize = 16;
|
||||
const double _rowChevronGap = 10;
|
||||
const double _segmentTrackHeight = 34;
|
||||
const double _segmentHeight = 26;
|
||||
const double _segmentRadius = 8;
|
||||
const double _segmentTrackRadius = 10;
|
||||
const double _segmentTrackPadding = 4;
|
||||
const double _segmentPadding = 10;
|
||||
const double _segmentGap = 6;
|
||||
const List<double> _speedOptions = [0.75, 1.0, 1.25, 1.5, 2.0, 3.0];
|
||||
const List<String> _qualityOptions = ['AUTO', '720P', '1080P'];
|
||||
const String _autoQuality = 'AUTO';
|
||||
@@ -82,7 +91,7 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
final l10n = widget.l10n;
|
||||
return Material(
|
||||
key: const Key('player-more-sheet'),
|
||||
color: AppColors.card,
|
||||
color: AppColors.ink,
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
top: Radius.circular(_sheetRadius),
|
||||
),
|
||||
@@ -90,7 +99,7 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 20),
|
||||
padding: const EdgeInsets.fromLTRB(12, 8, 12, 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
@@ -105,31 +114,30 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_header(l10n),
|
||||
_speedPicker(),
|
||||
const SizedBox(height: 4),
|
||||
_qualityPicker(l10n),
|
||||
const SizedBox(height: 12),
|
||||
_group([_speedPicker(), _qualityPicker(l10n)]),
|
||||
const SizedBox(height: _groupGap),
|
||||
_actionRow(
|
||||
key: const Key('player-more-clear'),
|
||||
icon: Icons.fullscreen_rounded,
|
||||
title: l10n.clearPlayback,
|
||||
onTap: _clear,
|
||||
),
|
||||
if (widget.actions.onPip != null)
|
||||
_group([
|
||||
_actionRow(
|
||||
key: const Key('player-more-pip'),
|
||||
icon: Icons.picture_in_picture_alt_rounded,
|
||||
title: l10n.pictureInPicture,
|
||||
onTap: () => _closeThen(widget.actions.onPip!),
|
||||
key: const Key('player-more-clear'),
|
||||
icon: Icons.fullscreen,
|
||||
title: l10n.clearPlayback,
|
||||
onTap: _clear,
|
||||
),
|
||||
_actionRow(
|
||||
key: const Key('player-more-offline'),
|
||||
icon: Icons.download_rounded,
|
||||
title: l10n.offlineCache,
|
||||
onTap: () => _closeThen(widget.actions.onDownload),
|
||||
),
|
||||
if (widget.actions.onPip != null)
|
||||
_actionRow(
|
||||
key: const Key('player-more-pip'),
|
||||
icon: Icons.picture_in_picture_alt_outlined,
|
||||
title: l10n.pictureInPicture,
|
||||
onTap: () => _closeThen(widget.actions.onPip!),
|
||||
),
|
||||
_actionRow(
|
||||
key: const Key('player-more-offline'),
|
||||
icon: Icons.download_outlined,
|
||||
title: l10n.offlineCache,
|
||||
onTap: () => _closeThen(widget.actions.onDownload),
|
||||
),
|
||||
]),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -137,35 +145,21 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _header(AppLocalizations l10n) => Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
l10n.more,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox.square(
|
||||
dimension: 32,
|
||||
child: IconButton(
|
||||
key: const Key('player-more-close'),
|
||||
tooltip: l10n.close,
|
||||
padding: EdgeInsets.zero,
|
||||
onPressed: () => Navigator.pop(context),
|
||||
icon: const Icon(Icons.close_rounded, size: 18),
|
||||
),
|
||||
),
|
||||
],
|
||||
Widget _group(List<Widget> rows) => Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(vertical: _groupVerticalPadding),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.circular(_groupRadius),
|
||||
),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: rows),
|
||||
);
|
||||
|
||||
Widget _speedPicker() => _optionRow(
|
||||
rowKey: const Key('player-more-speed-row'),
|
||||
optionsKey: const Key('player-more-speed'),
|
||||
icon: Icons.speed_rounded,
|
||||
trackKey: const Key('player-more-speed-track'),
|
||||
icon: Icons.speed_outlined,
|
||||
title: widget.l10n.playbackSpeed,
|
||||
options: [
|
||||
for (final value in _speedOptions)
|
||||
@@ -184,7 +178,8 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
Widget _qualityPicker(AppLocalizations l10n) => _optionRow(
|
||||
rowKey: const Key('player-more-quality-row'),
|
||||
optionsKey: const Key('player-more-quality'),
|
||||
icon: Icons.high_quality_rounded,
|
||||
trackKey: const Key('player-more-quality-track'),
|
||||
icon: Icons.high_quality_outlined,
|
||||
title: l10n.playbackQuality,
|
||||
options: [
|
||||
for (final quality in _qualityOptions) _qualitySegment(l10n, quality),
|
||||
@@ -194,6 +189,7 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
Widget _optionRow({
|
||||
required Key rowKey,
|
||||
required Key optionsKey,
|
||||
required Key trackKey,
|
||||
required IconData icon,
|
||||
required String title,
|
||||
required List<Widget> options,
|
||||
@@ -201,45 +197,52 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
return SizedBox(
|
||||
key: rowKey,
|
||||
height: _rowHeight,
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 88,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, color: AppColors.muted, size: 18),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: _rowHorizontalPadding),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, color: AppColors.onSurface, size: _rowIconSize),
|
||||
const SizedBox(width: _rowIconGap),
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: _rowLabelSize,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: _rowChevronGap),
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: SingleChildScrollView(
|
||||
key: optionsKey,
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Container(
|
||||
key: trackKey,
|
||||
height: _segmentTrackHeight,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: _segmentTrackPadding,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.raised,
|
||||
borderRadius: BorderRadius.circular(_segmentTrackRadius),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: options,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
key: optionsKey,
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
for (var index = 0; index < options.length; index++) ...[
|
||||
if (index > 0) const SizedBox(width: _segmentGap),
|
||||
options[index],
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -275,26 +278,34 @@ class _PlayerMoreSheetState extends State<PlayerMoreSheet> {
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
height: _rowHeight,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, color: AppColors.muted, size: 20),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: _rowHorizontalPadding,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, color: AppColors.onSurface, size: _rowIconSize),
|
||||
const SizedBox(width: _rowIconGap),
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: _rowLabelSize,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
color: AppColors.subtle,
|
||||
size: 18,
|
||||
),
|
||||
],
|
||||
const SizedBox(width: _rowChevronGap),
|
||||
const Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
color: AppColors.subtle,
|
||||
size: _rowIconSize,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -330,36 +341,41 @@ class _SegmentButton extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final background = selected
|
||||
? AppColors.blue
|
||||
: enabled
|
||||
? AppColors.raised
|
||||
: AppColors.cardAlt;
|
||||
final foreground = selected
|
||||
? AppColors.onPrimary
|
||||
: enabled
|
||||
? AppColors.onSurface
|
||||
: enabled
|
||||
? AppColors.muted
|
||||
: AppColors.subtle;
|
||||
return Material(
|
||||
color: background,
|
||||
color: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(_segmentRadius),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(_segmentRadius),
|
||||
child: SizedBox(
|
||||
child: Container(
|
||||
height: _segmentHeight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: _segmentPadding),
|
||||
child: Center(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: foreground,
|
||||
fontSize: 12,
|
||||
fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: _segmentPadding),
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? AppColors.card : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(_segmentRadius),
|
||||
boxShadow: selected
|
||||
? const [
|
||||
BoxShadow(
|
||||
color: Color(0x14000000),
|
||||
blurRadius: 4,
|
||||
offset: Offset(0, 1),
|
||||
),
|
||||
]
|
||||
: null,
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: foreground,
|
||||
fontSize: 14,
|
||||
fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in new issue
Block a user