[ImageViewer]: 增加图片描述

Tencent · Dec 18, 2024 · a4ca903 · a4ca903
1 parent 9ffa5b6
commit a4ca903
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 8 deletions.
diff --git a/tdesign-component/example/lib/page/td_image_viewer_page.dart b/tdesign-component/example/lib/page/td_image_viewer_page.dart
@@ -29,6 +29,7 @@ class _TDImageViewerPageState extends State<TDImageViewerPage> {
         ExampleItem(desc: '长按图片', builder: _longPressImageViewer),
         ExampleItem(desc: '图片超宽情况', builder: _ultraWidthImageViewer),
         ExampleItem(desc: '图片超高情况', builder: _ultraHeightImageViewer),
+        ExampleItem(desc: '带图片描述', builder: _descImageViewer),
       ],
     );
   }
@@ -150,6 +151,29 @@ class _TDImageViewerPageState extends State<TDImageViewerPage> {
     );
   }
 
+  @Demo(group: 'image_viewer')
+  Widget _descImageViewer(BuildContext context) {
+    var delImages = [
+      'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+      'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
+    ];
+    var labels = ['图片描述1', '图片描述2'];
+    return TDButton(
+      type: TDButtonType.ghost,
+      theme: TDButtonTheme.primary,
+      isBlock: true,
+      size: TDButtonSize.large,
+      text: '带图片描述',
+      onTap: () {
+        TDImageViewer.showImageViewer(
+          context: context,
+          images: delImages,
+          labels: labels,
+        );
+      },
+    );
+  }
+
   Widget _getSheetItem(BuildContext context) {
     return Container(
       width: double.infinity,

diff --git a/tdesign-component/lib/src/components/image_viewer/td_image_viewer.dart b/tdesign-component/lib/src/components/image_viewer/td_image_viewer.dart
@@ -12,6 +12,7 @@ class TDImageViewer {
   static void showImageViewer({
     required BuildContext context,
     required List<dynamic> images,
+    List<String>? labels,
     bool? closeBtn = true,
     bool? deleteBtn = false,
     bool? showIndex = false,
@@ -32,6 +33,7 @@ class TDImageViewer {
       builder: (context) {
         return TDImageViewerWidget(
           images: images,
+          labels: labels,
           closeBtn: closeBtn,
           deleteBtn: deleteBtn,
           showIndex: showIndex,

diff --git a/tdesign-component/lib/src/components/image_viewer/td_image_viewer_widget.dart b/tdesign-component/lib/src/components/image_viewer/td_image_viewer_widget.dart
@@ -18,6 +18,7 @@ class TDImageViewerWidget extends StatefulWidget {
     this.closeBtn,
     this.deleteBtn,
     required this.images,
+    this.labels,
     this.showIndex,
     this.defaultIndex,
     this.onIndexChange,
@@ -37,6 +38,9 @@ class TDImageViewerWidget extends StatefulWidget {
   /// 图片数组
   final List<dynamic> images;
 
+  /// 图片描述
+  final List<String>? labels;
+
   /// 是否显示页码
   final bool? showIndex;
 
@@ -79,6 +83,9 @@ class _TDImageViewerWidgetState extends State<TDImageViewerWidget> {
     if((widget.defaultIndex ?? 0) > widget.images.length - 1) {
       throw FlutterError('defaultIndex must be less than images.length');
     }
+    if(widget.labels != null && widget.images.length != widget.labels!.length) {
+      throw FlutterError('labels.length must be equals images.length');
+    }
     _index = (widget.defaultIndex ?? 0) + 1;
   }
 
@@ -138,6 +145,37 @@ class _TDImageViewerWidgetState extends State<TDImageViewerWidget> {
     throw FlutterError('image ${image} type is not supported');
   }
 
+  Widget _getPageTitle() {
+    if(widget.labels != null) {
+      return Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Visibility(
+            visible: (widget.labels![_index - 1] ?? '') != '',
+            child: Text(widget.labels![_index - 1],
+              textAlign: TextAlign.center,
+              style: TextStyle(color: TDTheme.of(context).whiteColor1),
+            ),
+          ),
+          Visibility(
+            visible: widget.showIndex ?? false,
+            child: Text('$_index / ${widget.images.length}',
+              textAlign: TextAlign.center,
+              style: TextStyle(color: TDTheme.of(context).grayColor5, fontSize: 10),
+            ),
+          )
+        ],
+      );
+    }
+    return Text(
+      (widget.showIndex ?? false)
+          ? '$_index / ${widget.images.length}'
+          : '',
+      textAlign: TextAlign.center,
+      style: TextStyle(color: TDTheme.of(context).whiteColor1),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     var media =  MediaQuery.of(context);
@@ -169,7 +207,7 @@ class _TDImageViewerWidgetState extends State<TDImageViewerWidget> {
             },
             itemCount: widget.images.length,
             onIndexChanged: (index) {
-              if ((widget.showIndex ?? false)) {
+              if ((widget.showIndex ?? false) || widget.labels != null) {
                 setState(() {
                   _index = index + 1;
                 });
@@ -200,13 +238,7 @@ class _TDImageViewerWidgetState extends State<TDImageViewerWidget> {
                 ),
                 Expanded(
                   flex: 1,
-                  child: Text(
-                    (widget.showIndex ?? false)
-                        ? '$_index / ${widget.images.length}'
-                        : '',
-                    textAlign: TextAlign.center,
-                    style: TextStyle(color: TDTheme.of(context).whiteColor1),
-                  ),
+                  child: _getPageTitle(),
                 ),
                 if (widget.deleteBtn ?? false)
                   GestureDetector(