From 4f9ee7781f0a5440f6c573617e02acf0d012b2a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?lollipopkit=F0=9F=8F=B3=EF=B8=8F=E2=80=8D=E2=9A=A7?= =?UTF-8?q?=EF=B8=8F?= <10864310+lollipopkit@users.noreply.github.com> Date: Tue, 27 Aug 2024 17:20:47 +0800 Subject: [PATCH] fix: ssh tab page UI (#555) --- lib/view/page/server/tab.dart | 21 +++++++++---- lib/view/page/ssh/tab.dart | 56 +++++++++++------------------------ macos/Podfile.lock | 6 ---- 3 files changed, 33 insertions(+), 50 deletions(-) diff --git a/lib/view/page/server/tab.dart b/lib/view/page/server/tab.dart index ff8d457b..d0811b71 100644 --- a/lib/view/page/server/tab.dart +++ b/lib/view/page/server/tab.dart @@ -315,15 +315,24 @@ class _ServerPageState extends State } } + final height = _calcCardHeight(srv.conn, cardStatus.value.flip); return AnimatedContainer( duration: const Duration(milliseconds: 377), curve: Curves.fastEaseInToSlowEaseOut, - height: _calcCardHeight(srv.conn, cardStatus.value.flip), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, - children: children, + height: height, + // Use [OverflowBox] to dismiss the warning of [Column] overflow. + child: OverflowBox( + // If `height == _kCardHeightMin`, the `maxHeight` will be ignored. + // + // You can comment the `maxHeight` then connect&disconnect the server + // to see the difference. + maxHeight: height != _kCardHeightMin ? height : null, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: children, + ), ), ); }, diff --git a/lib/view/page/ssh/tab.dart b/lib/view/page/ssh/tab.dart index 39bea960..7afe529a 100644 --- a/lib/view/page/ssh/tab.dart +++ b/lib/view/page/ssh/tab.dart @@ -90,45 +90,23 @@ class _SSHTabPageState extends State child: Text(libL10n.empty, textAlign: TextAlign.center), ); } - - final ratio = context.media.size.aspectRatio; - return GridView.builder( - padding: const EdgeInsets.all(7), - cacheExtent: 50, - itemBuilder: (context, idx) { - final spi = ServerProvider.pick(id: order[idx])?.value.spi; + return Wrap( + children: order.map((id) { + final spi = ServerProvider.pick(id: id)?.value.spi; if (spi == null) return UIs.placeholder; return CardX( child: InkWell( onTap: () => _onTapInitCard(spi), - child: Container( - alignment: Alignment.centerLeft, - padding: const EdgeInsets.only(left: 17, right: 7), - child: Row( - children: [ - Expanded( - child: Text( - spi.name, - style: UIs.text18, - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), - ), - const Icon(Icons.chevron_right) - ], - ), - ), + child: Text( + spi.name, + style: UIs.text18, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ).paddingSymmetric(horizontal: 13, vertical: 7), ), ); - }, - itemCount: ServerProvider.servers.length, - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, - childAspectRatio: 3 * (ratio / (9 / 16)), - crossAxisSpacing: 3, - mainAxisSpacing: 3, - ), - ); + }).toList(), + ).paddingSymmetric(horizontal: 13); }), ); } @@ -262,20 +240,20 @@ final class _TabBar extends StatelessWidget implements PreferredSizeWidget { overflow: TextOverflow.ellipsis, style: TextStyle(color: color), softWrap: false, - textAlign: TextAlign.center, + textAlign: TextAlign.right, textWidthBasis: TextWidthBasis.parent, ); final Widget btn; if (selected) { btn = Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Btn.icon( icon: Icon(MingCute.close_circle_fill, color: color, size: 17), onTap: () => onClose(name), padding: null, ), - SizedBox(width: kNarrowWidth - 10, child: text), + SizedBox(width: kNarrowWidth - 15, child: text), ], ); } else { @@ -284,9 +262,11 @@ final class _TabBar extends StatelessWidget implements PreferredSizeWidget { child = AnimatedContainer( width: selected ? kWideWidth : kNarrowWidth, duration: Durations.medium3, - padding: selected ? const EdgeInsets.symmetric(horizontal: 7) : null, curve: Curves.fastEaseInToSlowEaseOut, - child: btn, + child: OverflowBox( + maxWidth: selected ? kWideWidth : null, + child: btn, + ), ); } diff --git a/macos/Podfile.lock b/macos/Podfile.lock index eedad32b..c26542ca 100644 --- a/macos/Podfile.lock +++ b/macos/Podfile.lock @@ -7,8 +7,6 @@ PODS: - local_auth_darwin (0.0.1): - Flutter - FlutterMacOS - - mobile_scanner (5.1.1): - - FlutterMacOS - package_info_plus (0.0.1): - FlutterMacOS - path_provider_foundation (0.0.1): @@ -33,7 +31,6 @@ DEPENDENCIES: - FlutterMacOS (from `Flutter/ephemeral`) - icloud_storage (from `Flutter/ephemeral/.symlinks/plugins/icloud_storage/macos`) - local_auth_darwin (from `Flutter/ephemeral/.symlinks/plugins/local_auth_darwin/darwin`) - - mobile_scanner (from `Flutter/ephemeral/.symlinks/plugins/mobile_scanner/macos`) - package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`) - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`) - screen_retriever (from `Flutter/ephemeral/.symlinks/plugins/screen_retriever/macos`) @@ -52,8 +49,6 @@ EXTERNAL SOURCES: :path: Flutter/ephemeral/.symlinks/plugins/icloud_storage/macos local_auth_darwin: :path: Flutter/ephemeral/.symlinks/plugins/local_auth_darwin/darwin - mobile_scanner: - :path: Flutter/ephemeral/.symlinks/plugins/mobile_scanner/macos package_info_plus: :path: Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos path_provider_foundation: @@ -76,7 +71,6 @@ SPEC CHECKSUMS: FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24 icloud_storage: 33b05299e26d1391d724da8d62860e702380a1cd local_auth_darwin: 66e40372f1c29f383a314c738c7446e2f7fdadc3 - mobile_scanner: 1efac1e53c294b24e3bb55bcc7f4deee0233a86b package_info_plus: fa739dd842b393193c5ca93c26798dff6e3d0e0c path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46 screen_retriever: 59634572a57080243dd1bf715e55b6c54f241a38