Flutter图片浏览时删除图片怎样跳转下一张？

Question

新人正在学习Flutter，使用wechat_assets_picker上传多张图片，使用extended_image做图片浏览，浏览图片时，删除单张图片后extended_image怎样跳转到下一张图片？

post.dart页面代码：

import 'dart:io';


import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

class Post extends StatefulWidget {
  const Post({super.key});

  @override
  State<Post> createState() => _PostState();
}

class _PostState extends State<Post> {

  //  已选中图片列表
  List<AssetEntity> selectedAssets = [];

  // 相册图片初始化索引
  int currentIndex = 0;

  /// 从相册选取图片
  pickImage(BuildContext context) async {
    final List<AssetEntity>? result = await AssetPicker.pickAssets(
      context,
      pickerConfig: AssetPickerConfig(
        maxAssets: 4,
        requestType: RequestType.image,
        textDelegate: const AssetPickerTextDelegate(),
        selectedAssets: selectedAssets
      ),
    );
    if (result != null) {
      setState(() {
        selectedAssets = result;
      });
    }
  }

  /// 上传的图片列表（小图预览）
  Widget _imagesList() {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final double width = (constraints.maxWidth - 5 * 3) / 4;
          return Wrap(
            spacing: 5,
            children: [
              for (final asset in selectedAssets)
                InkWell(
                  onTap: () {
                    setState(() {
                      currentIndex = selectedAssets.indexOf(asset);
                    });
                    Get.to(() => gallery()); // 单击单张缩略图进入预览组件
                  },
                  child: Container(
                    clipBehavior: Clip.antiAlias,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5)
                    ),
                    child: AssetEntityImage(
                      asset,
                      width: width,
                      height: width,
                      fit: BoxFit.cover,
                      isOriginal: false, //是否原图，否
                    ),
                  ),
                ),
              if(selectedAssets.length < 4)
                InkWell(
                  onTap: () => pickImage(context),
                  child: Container(
                    width: width,
                    height: width,
                    decoration: BoxDecoration(
                        color: const Color.fromRGBO(242, 242, 244, 1),
                        borderRadius: BorderRadius.circular(5)
                    ),
                    child: const Icon(Fonts.tianjia, color: Color.fromRGBO(178, 178, 180, 1)),
                  ),
                )
            ],
          );
        }
    );
  }

  // 图片浏览
  Widget gallery() {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Row(
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            InkWell(
                onTap: () => Get.back(),
                child: const Icon(Fonts.fanhui)
            ),

            // 删除按钮
            InkWell(
              onTap: () {
                setState(() {
                  selectedAssets.remove(selectedAssets[currentIndex]);
                });
                //当选中的图片被删除干净后，关掉图片查看器
                if(selectedAssets.isEmpty) {
                  Get.back();
                }
              },
              child: const Icon(Fonts.shanchu, size: 20, color: Color.fromRGBO(50, 50, 52, 1)),
            ),
          ],
        ),
      ),
      body: ExtendedImageGesturePageView.builder(
          controller: ExtendedPageController(
            // 传入图片初始位置
            initialPage: currentIndex,
          ),
          onPageChanged: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          itemCount: selectedAssets.length,
          itemBuilder: (BuildContext context, int index) {
            AssetEntity item = selectedAssets[index];
            return ExtendedImage(
              image: AssetEntityImageProvider(
                  item,
                  isOriginal: true
              ),
              fit: BoxFit.cover,
              mode: ExtendedImageMode.gesture,
              clearMemoryCacheWhenDispose: true,
              initGestureConfigHandler: ((state) {
                return GestureConfig(
                    minScale: 0.9,
                    maxScale: 3.0,
                    animationMinScale: 0.7,
                    animationMaxScale: 3.5,
                    speed: 1.0,
                    inertialSpeed: 100.0,
                    initialScale: 1.0,
                    inPageView: true
                );
              }),
            );
          }
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: _imagesList()
      )
    );
  }
}

目前能正常删除已选中的图片，但是在删除成功后，图片查看器没办法自动转到在一张图片。

Answer 1

假如当前在第1页，执行setState((){selectedAssets.remove(selectedAssets[currentIndex]);
  }); 后就会显示第2页的内容 ；代码应该没有问题的     

class Chome extends StatefulWidget {
  const Chome({super.key});

  @override
  State<Chome> createState() => _ChomeState();
}

class _ChomeState extends State<Chome> {
  var currentIndex = 0;
  var selectedAssets = [
    'A',
    'B',
    'C',
  ];
  PageController ctl = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Row(
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            InkWell(onTap: () => () {}, child: const Icon(Icons.arrow_back)),
            InkWell(
              onTap: () {
                setState(() {
                  selectedAssets.remove(selectedAssets[currentIndex]);
                });
              },
              child: const Icon(
                Icons.delete,
              ),
            ),
          ],
        ),
      ),
      body: ExtendedImageGesturePageView.builder(
          controller: ctl,
          onPageChanged: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          itemCount: selectedAssets.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Container(
                color: Colors.grey,
                child: Text(
                  'Page: ${selectedAssets[index]}',
                  style: const TextStyle(color: Colors.red, fontSize: 40),
                ),
              ),
            );
          }),
    );
  
}

看看这个例子是有改变的