import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoView extends StatefulWidget {
  final List<String> imageList;
  PhotoView({this.imageList = const []});

  @override
  _PhotoViewState createState() => _PhotoViewState();
}

class _PhotoViewState extends State<PhotoView> with WidgetsBindingObserver {
  int nowIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      backgroundColor: Colors.black,
      body: PhotoViewGallery.builder(
        scrollPhysics: const BouncingScrollPhysics(),
        builder: (BuildContext context, int index) {
          return PhotoViewGalleryPageOptions(
            imageProvider: CachedNetworkImageProvider(widget.imageList[index]),
          );
        },
        itemCount: widget.imageList.length,
        backgroundDecoration: BoxDecoration(color: Colors.black),
        onPageChanged: (index) {
          print(index);
          setState(() {
            nowIndex = index + 1;
          });
        },
        // loadingChild: Center(
        //   child: Text('加载中...',),

        // )
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('${nowIndex}/${widget.imageList.length}', style: TextStyle(color: Colors.white)),
          Container(
            width: 220,
            height: 36,
            margin: EdgeInsets.only(top: 10, bottom: 20),
            child: RaisedButton(
              color: Color(0xFFD4504B),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
              child: Text(
                '我已设置完毕',
                style: TextStyle(color: Colors.white, fontSize: 14),
              ),
              onPressed: () {
                Navigator.of(context).pop(true);
              },
            ),
          )
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}