tdesign-flutter/tdesign-component/example/lib/page/td_image_viewer_page.dart at develop · runoob-coder/tdesign-flutter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../annotation/demo.dart';
import '../base/example_widget.dart';

final List<TDActionSheetItem> actionSheetItems = [
  TDActionSheetItem(label: '保存图片', icon: const Icon(TDIcons.save)),
  TDActionSheetItem(label: '删除图片', icon: const Icon(TDIcons.delete)),
];

final List<String> images = [
  'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
  'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
];

class TDImageViewerPage extends StatefulWidget {
  const TDImageViewerPage({Key? key}) : super(key: key);

  @override
  State<TDImageViewerPage> createState() => _TDImageViewerPageState();
}

class _TDImageViewerPageState extends State<TDImageViewerPage> {
  @override
  Widget build(BuildContext context) {
    return ExamplePage(
      title: tdTitle(),
      desc: '用于图片内容的缩略展示与查看。',
      exampleCodeGroup: 'image_viewer',
      children: [
        ExampleModule(title: '组件类型', children: [
          ExampleItem(desc: '基础图片预览', builder: _basicImageViewer),
          ExampleItem(desc: '带操作图片预览', builder: _actionImageViewer)
        ]),
      ],
      test: [
        ExampleItem(desc: '长按图片', builder: _longPressImageViewer),
        ExampleItem(desc: '图片超宽情况', builder: _ultraWidthImageViewer),
        ExampleItem(desc: '图片超高情况', builder: _ultraHeightImageViewer),
        ExampleItem(desc: '带图片标题', builder: _descImageViewer),
      ],
    );
  }

  @Demo(group: 'image_viewer')
  Widget _basicImageViewer(BuildContext context) {
    return TDButton(
      type: TDButtonType.ghost,
      theme: TDButtonTheme.primary,
      isBlock: true,
      size: TDButtonSize.large,
      text: '基础图片预览',
      onTap: () {
        TDImageViewer.showImageViewer(context: context, images: images);
      },
    );
  }

  @Demo(group: 'image_viewer')
  Widget _actionImageViewer(BuildContext context) {
    return TDButton(
      type: TDButtonType.ghost,
      theme: TDButtonTheme.primary,
      isBlock: true,
      size: TDButtonSize.large,
      text: '带操作图片预览',
      onTap: () {
        TDImageViewer.showImageViewer(
          context: context,
          images: images,
          showIndex: true,
          deleteBtn: true,
        );
      },
    );
  }

  @Demo(group: 'image_viewer')
  Widget _longPressImageViewer(BuildContext context) {
    return TDButton(
      type: TDButtonType.ghost,
      theme: TDButtonTheme.primary,
      isBlock: true,
      size: TDButtonSize.large,
      text: '长按图片',
      onTap: () {
        TDImageViewer.showImageViewer(
          context: context,
          images: images,
          deleteBtn: true,
          showIndex: true,
          onLongPress: (index) {
            TDActionSheet(
              context,
              visible: true,
              items: actionSheetItems,
            );
          },
        );
      },
    );
  }

  @Demo(group: 'image_viewer')
  Widget _ultraWidthImageViewer(BuildContext context) {
    return TDButton(
      type: TDButtonType.ghost,
      theme: TDButtonTheme.primary,
      isBlock: true,
      size: TDButtonSize.large,
      text: '图片超宽情况',
      onTap: () {
        TDImageViewer.showImageViewer(
          context: context,
          images: images,
          showIndex: true,
          height: 140,
          onLongPress: (index) {
            TDActionSheet(
              context,
              visible: true,
              items: actionSheetItems,
            );
          },
        );
      },
    );
  }

  @Demo(group: 'image_viewer')
  Widget _ultraHeightImageViewer(BuildContext context) {
    return TDButton(
      type: TDButtonType.ghost,
      theme: TDButtonTheme.primary,
      isBlock: true,
      size: TDButtonSize.large,
      text: '图片超高情况',
      onTap: () {
        TDImageViewer.showImageViewer(
          context: context,
          images: images,
          showIndex: true,
          width: 180,
          onLongPress: (index) {
            TDActionSheet(
              context,
              visible: true,
              items: actionSheetItems,
            );
          },
        );
      },
    );
  }

  @Demo(group: 'image_viewer')
  Widget _descImageViewer(BuildContext context) {
    return TDButton(
      type: TDButtonType.ghost,
      theme: TDButtonTheme.primary,
      isBlock: true,
      size: TDButtonSize.large,
      text: '带图片标题',
      onTap: () {
        TDImageViewer.showImageViewer(
          context: context,
          images: images,
          labels: ['图片标题1', '图片标题2'],
        );
      },
    );
  }
}