Flutter图片浏览时删除图片怎样跳转下一张?-灵析社区

元气满满才怪啊

新人正在学习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 createState() => _PostState(); } class _PostState extends State { // 已选中图片列表 List selectedAssets = []; // 相册图片初始化索引 int currentIndex = 0; /// 从相册选取图片 pickImage(BuildContext context) async { final List? 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 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() ) ); } } 目前能正常删除已选中的图片,但是在删除成功后,图片查看器没办法自动转到在一张图片。

阅读量:143

点赞量:0

问AI
假如当前在第1页,执行setState((){selectedAssets.remove(selectedAssets[currentIndex]); }); 后就会显示第2页的内容 ;代码应该没有问题的 class Chome extends StatefulWidget { const Chome({super.key}); @override State createState() => _ChomeState(); } class _ChomeState extends State { 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), ), ), ); }), ); } 看看这个例子是有改变的