实现需求:四图到单图的右下角索引!!!用好后端的index字段。点击对应的照片就进入对应单张图片
1、四图点击其中一张
return GestureDetector(
onTap: (){
print("finish 第一次点击的索引值-----${index}");
Navigator.of(context).pushNamed("/single",arguments: {"images":images,"beginIndex":index});
},
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()
],
),
3、在singlecontent进行赋值和使用
难点:pagecontroller的使用
class SingleContent extends StatefulWidget {
final List<HistoryOutputImages>? images;
final int beginIndex;
const SingleContent({Key? key,required this.images,required this.beginIndex});
State<SingleContent> createState() => _SingleContentState();
}
class _SingleContentState extends State<SingleContent> {
// 当前图片的索引,finish给他一个初始值,就能跳到对应的图片了!!!
late int currIndex;
// 拿到当前是第几张照片
late PageController _pageController;
int _currentPage = 0;
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;
});
}
});
}
赋值
itemBuilder: (context,index){
// 能不能等到真正滑动到了才有信息。
print("当前图片的所有信息-${widget.images?[index]}");
currIndex = widget.images![index].index;
print("当前图片的索引:${currIndex}");
使用
Text("${currIndex + 1}/${widget.images?.length}",style: TextStyle(color: Colors.white,fontSize: 15),)