Mirrors/nc-photos
1
0
Fork 0
mirror of https://gitlab.com/nkming2/nc-photos.git synced 2025-02-02 06:46:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

(web) Fix navigation buttons showing on edge items

Browse source
This commit is contained in:
Ming Ming 2021-04-21 23:40:28 +08:00
parent 4ad0b673fc
commit 06e94c83b3
1 changed files with 105 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
lib/widget/viewer.dart
View file

@ -71,6 +71,10 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
@override @override
build(BuildContext context) { build(BuildContext context) {
if (!_hasInit) {
_updateNavigationState(widget.startIndex);
_hasInit = true;
}
return AppTheme( return AppTheme(
child: Scaffold( child: Scaffold(
body: Builder( body: Builder(
@ -158,72 +162,74 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
List<Widget> _buildNavigationButtons(BuildContext context) { List<Widget> _buildNavigationButtons(BuildContext context) {
return [ return [
Align( if (_canSwitchRight)
alignment: Alignment.centerRight, Align(
child: Material( alignment: Alignment.centerRight,
type: MaterialType.transparency, child: Material(
child: Visibility( type: MaterialType.transparency,
visible: _canSwitchPage(), child: Visibility(
child: AnimatedOpacity( visible: _canSwitchPage(),
opacity: _isShowNext ? 1.0 : 0.0, child: AnimatedOpacity(
duration: k.animationDurationShort, opacity: _isShowRight ? 1.0 : 0.0,
child: MouseRegion( duration: k.animationDurationShort,
onEnter: (details) { child: MouseRegion(
setState(() { onEnter: (details) {
_isShowNext = true; setState(() {
}); _isShowRight = true;
}, });
onExit: (details) { },
setState(() { onExit: (details) {
_isShowNext = false; setState(() {
}); _isShowRight = false;
}, });
child: Padding( },
padding: child: Padding(
const EdgeInsets.symmetric(horizontal: 24, vertical: 36), padding: const EdgeInsets.symmetric(
child: IconButton( horizontal: 24, vertical: 36),
icon: Icon(Icons.arrow_forward_ios_outlined), child: IconButton(
onPressed: _switchToRightImage, icon: Icon(Icons.arrow_forward_ios_outlined),
onPressed: _switchToRightImage,
),
), ),
), ),
), ),
), ),
), ),
), ),
), if (_canSwitchLeft)
Align( Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: Material( child: Material(
type: MaterialType.transparency, type: MaterialType.transparency,
child: Visibility( child: Visibility(
visible: _canSwitchPage(), visible: _canSwitchPage(),
child: AnimatedOpacity( child: AnimatedOpacity(
opacity: _isShowPrevious ? 1.0 : 0.0, opacity: _isShowLeft ? 1.0 : 0.0,
duration: k.animationDurationShort, duration: k.animationDurationShort,
child: MouseRegion( child: MouseRegion(
onEnter: (details) { onEnter: (details) {
setState(() { setState(() {
_isShowPrevious = true; _isShowLeft = true;
}); });
}, },
onExit: (details) { onExit: (details) {
setState(() { setState(() {
_isShowPrevious = false; _isShowLeft = false;
}); });
}, },
child: Padding( child: Padding(
padding: padding: const EdgeInsets.symmetric(
const EdgeInsets.symmetric(horizontal: 24, vertical: 36), horizontal: 24, vertical: 36),
child: IconButton( child: IconButton(
icon: Icon(Icons.arrow_back_ios_outlined), icon: Icon(Icons.arrow_back_ios_outlined),
onPressed: _switchToLeftImage, onPressed: _switchToLeftImage,
),
), ),
), ),
), ),
), ),
), ),
), ),
),
]; ];
} }
@ -746,14 +752,19 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
/// Switch to the previous image in the stream /// Switch to the previous image in the stream
void _switchToPrevImage() { void _switchToPrevImage() {
_pageController.previousPage( _pageController
duration: k.animationDurationNormal, curve: Curves.easeInOut); .previousPage(
duration: k.animationDurationNormal, curve: Curves.easeInOut)
.whenComplete(
() => _updateNavigationState(_pageController.page.round()));
} }
/// Switch to the next image in the stream /// Switch to the next image in the stream
void _switchToNextImage() { void _switchToNextImage() {
_pageController.nextPage( _pageController
duration: k.animationDurationNormal, curve: Curves.easeInOut); .nextPage(duration: k.animationDurationNormal, curve: Curves.easeInOut)
.whenComplete(
() => _updateNavigationState(_pageController.page.round()));
} }
/// Switch to the image on the "left", what that means depend on the current /// Switch to the image on the "left", what that means depend on the current
@ -776,6 +787,36 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
} }
} }
/// Update the navigation state for [page]
void _updateNavigationState(int page) {
// currently useless to run on non-web platform
if (!kIsWeb) {
return;
}
final hasNext = page < widget.streamFiles.length - 1;
final hasPrev = page > 0;
final hasLeft =
Directionality.of(context) == TextDirection.ltr ? hasPrev : hasNext;
if (_canSwitchLeft != hasLeft) {
setState(() {
_canSwitchLeft = hasLeft;
if (!_canSwitchLeft) {
_isShowLeft = false;
}
});
}
final hasRight =
Directionality.of(context) == TextDirection.ltr ? hasNext : hasPrev;
if (_canSwitchRight != hasRight) {
setState(() {
_canSwitchRight = hasRight;
if (!_canSwitchRight) {
_isShowRight = false;
}
});
}
}
bool _canSwitchPage() => !_isZoomed(); bool _canSwitchPage() => !_isZoomed();
bool _canOpenDetailPane() => !_isZoomed(); bool _canOpenDetailPane() => !_isZoomed();
bool _canZoom() => !_isDetailPaneActive; bool _canZoom() => !_isDetailPaneActive;
@ -788,6 +829,8 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
a: true, a: true,
); );
var _hasInit = false;
var _isShowAppBar = true; var _isShowAppBar = true;
var _isAppBarActive = true; var _isAppBarActive = true;
@ -795,8 +838,10 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
var _isDetailPaneActive = false; var _isDetailPaneActive = false;
var _isClosingDetailPane = false; var _isClosingDetailPane = false;
var _isShowNext = false; var _canSwitchRight = true;
var _isShowPrevious = false; var _canSwitchLeft = true;
var _isShowRight = false;
var _isShowLeft = false;
var _isZooming = false; var _isZooming = false;
var _wasZoomed = false; var _wasZoomed = false;