dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增影视分享的几种样式

Browse Source
This commit is contained in:
DelLevin-Home
2026-06-19 00:28:13 +08:00
parent 56dee60782
commit 67b77f14e0
12 changed files with 2076 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
lib/widgets/book_status_bar.dart
View File

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
/// 阅读状态选择栏 - 水滴滑动动画
/// 阅读状态选择栏 - 交叉渐变动画
class BookStatusBar extends StatelessWidget {
const BookStatusBar({super.key});
@@ -15,9 +15,7 @@ class BookStatusBar extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: colors.surface,
border: Border(
bottom: BorderSide(color: colors.outline, width: 0.5),
),
border: Border(bottom: BorderSide(color: colors.outline, width: 0.5)),
),
child: Container(
padding: const EdgeInsets.all(4),
@@ -25,66 +23,13 @@ class BookStatusBar extends StatelessWidget {
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 3;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 800),
curve: Curves.elasticOut,
left: provider.bookStatusIndex * tabWidth,
top: 0,
bottom: 0,
width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
),
),
),
Row(
children: [
_buildTab(
colors: colors,
label: '已读',
icon: Icons.check_circle_outline,
isSelected: provider.bookStatusIndex == 0,
onTap: () => provider.setBookStatusIndex(0),
),
_buildTab(
colors: colors,
label: '在读',
icon: Icons.menu_book_outlined,
isSelected: provider.bookStatusIndex == 1,
onTap: () => provider.setBookStatusIndex(1),
),
_buildTab(
colors: colors,
label: '想读',
icon: Icons.bookmark_outlined,
isSelected: provider.bookStatusIndex == 2,
onTap: () => provider.setBookStatusIndex(2),
),
],
),
],
),
);
},
child: SizedBox(
height: 40,
child: Row(children: [
_buildTab(colors, '已读', Icons.check_circle_outline, provider.bookStatusIndex == 0, () => provider.setBookStatusIndex(0)),
_buildTab(colors, '在读', Icons.menu_book_outlined, provider.bookStatusIndex == 1, () => provider.setBookStatusIndex(1)),
_buildTab(colors, '想读', Icons.bookmark_outlined, provider.bookStatusIndex == 2, () => provider.setBookStatusIndex(2)),
]),
),
),
);
@@ -92,39 +37,45 @@ class BookStatusBar extends StatelessWidget {
);
}
Widget _buildTab({
required ColorScheme colors,
required String label,
required IconData icon,
required bool isSelected,
required VoidCallback onTap,
}) {
Widget _buildTab(ColorScheme colors, String label, IconData icon, bool isSelected, VoidCallback onTap) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: Container(
height: double.infinity,
child: AnimatedContainer(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
margin: const EdgeInsets.all(3),
decoration: BoxDecoration(
color: isSelected ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected ? [BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2))] : null,
),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: 16,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
),
const SizedBox(width: 6),
Text(
label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
child: AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Icon(icon, key: ValueKey(isSelected), size: 16,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6)),
),
),
],
const SizedBox(width: 6),
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Text(label, key: ValueKey('$label$isSelected')),
),
],
),
),
),
),

133
lib/widgets/movie_status_bar.dart
View File

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
/// 观影状态选择栏 - 水滴滑动动画
/// 观影状态选择栏 - 交叉渐变动画
class MovieStatusBar extends StatelessWidget {
const MovieStatusBar({super.key});
@@ -15,9 +15,7 @@ class MovieStatusBar extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: colors.surface,
border: Border(
bottom: BorderSide(color: colors.outline, width: 0.5),
),
border: Border(bottom: BorderSide(color: colors.outline, width: 0.5)),
),
child: Container(
padding: const EdgeInsets.all(4),
@@ -25,66 +23,13 @@ class MovieStatusBar extends StatelessWidget {
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 3;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 800),
curve: Curves.elasticOut,
left: provider.movieStatusIndex * tabWidth,
top: 0,
bottom: 0,
width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
),
),
),
Row(
children: [
_buildTab(
colors: colors,
label: '已看',
icon: Icons.check_circle_outline,
isSelected: provider.movieStatusIndex == 0,
onTap: () => provider.setMovieStatusIndex(0),
),
_buildTab(
colors: colors,
label: '在看',
icon: Icons.play_circle_outline,
isSelected: provider.movieStatusIndex == 1,
onTap: () => provider.setMovieStatusIndex(1),
),
_buildTab(
colors: colors,
label: '想看',
icon: Icons.bookmark_outline,
isSelected: provider.movieStatusIndex == 2,
onTap: () => provider.setMovieStatusIndex(2),
),
],
),
],
),
);
},
child: SizedBox(
height: 40,
child: Row(children: [
_buildTab(colors, '已看', Icons.check_circle_outline, provider.movieStatusIndex == 0, () => provider.setMovieStatusIndex(0)),
_buildTab(colors, '在看', Icons.play_circle_outline, provider.movieStatusIndex == 1, () => provider.setMovieStatusIndex(1)),
_buildTab(colors, '想看', Icons.bookmark_outline, provider.movieStatusIndex == 2, () => provider.setMovieStatusIndex(2)),
]),
),
),
);
@@ -92,39 +37,45 @@ class MovieStatusBar extends StatelessWidget {
);
}
Widget _buildTab({
required ColorScheme colors,
required String label,
required IconData icon,
required bool isSelected,
required VoidCallback onTap,
}) {
Widget _buildTab(ColorScheme colors, String label, IconData icon, bool isSelected, VoidCallback onTap) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: Container(
height: double.infinity,
child: AnimatedContainer(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
margin: const EdgeInsets.all(3),
decoration: BoxDecoration(
color: isSelected ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected ? [BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2))] : null,
),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: 16,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
),
const SizedBox(width: 6),
Text(
label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
child: AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Icon(icon, key: ValueKey(isSelected), size: 16,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6)),
),
),
],
const SizedBox(width: 6),
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Text(label, key: ValueKey('$label$isSelected')),
),
],
),
),
),
),