flutter——四张图片点击对应的照片就进入对应单张图片_flutter 图片点击

实现需求：四图到单图的右下角索引！！！用好后端的index字段。点击对应的照片就进入对应单张图片

1、四图点击其中一张

return GestureDetector(
  onTap: (){
    print("finish 第一次点击的索引值-----${index}");
    Navigator.of(context).pushNamed("/single",arguments: {"images":images,"beginIndex":index});
  },
1
2
3
4
5

2、在single页面，主要是接收从finish传递过来的索引值，作为一个中转站。

// 从finish页面传递过来的
int beginIndex = (ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>?)?['beginIndex'];


body: Column(
  children: [
    SingleContent(images: images,beginIndex: beginIndex,),
    SingleTips(),
    SingleButton(),
    SingleFooter()
  ],
),
1
2
3
4
5
6
7
8
9
10
11
12

3、在singlecontent进行赋值和使用

难点：pagecontroller的使用

class SingleContent extends StatefulWidget {

  final List<HistoryOutputImages>? images;
  final int beginIndex;

  const SingleContent({Key? key,required this.images,required this.beginIndex});

  @override
  State<SingleContent> createState() => _SingleContentState();
}
1
2
3
4
5
6
7
8
9
10

class _SingleContentState extends State<SingleContent> {

  // 当前图片的索引，finish给他一个初始值，就能跳到对应的图片了！！！
  late int currIndex;

  // 拿到当前是第几张照片
  late PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    //！！！！！！在这里进行赋值！！！！！！！
    currIndex = widget.beginIndex;

    _pageController = PageController(initialPage: currIndex ?? 0);
   
     // ？？？这个操作还没怎么懂？
    _pageController.addListener(() {
      int newPage = _pageController.page?.round() ?? 0;
      if (newPage != _currentPage) {
        setState(() {
          _currentPage = newPage;
        });
      }
    });
  }
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

赋值

itemBuilder: (context,index){
  // 能不能等到真正滑动到了才有信息。
  print("当前图片的所有信息-${widget.images?[index]}");
  currIndex = widget.images![index].index;
  print("当前图片的索引：${currIndex}");
1
2
3
4
5

使用

Text("${currIndex + 1}/${widget.images?.length}",style: TextStyle(color: Colors.white,fontSize: 15),)
1