微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter:如何获取有关已选择网格中哪些图片的信息?

如何解决Flutter:如何获取有关已选择网格中哪些图片的信息?

如何获取有关在颤动中选择了网格中哪些图片的信息。请检查我的代码! 我真的需要一个答案。请帮我。我期待着大家的回音。

获取图像并将其放入网格中。

ImageEvalation.dart

class ImageEvaluation extends StatefulWidget {
  @override
  _ImageEvaluationState createState() => _ImageEvaluationState();
}

class _ImageEvaluationState extends State<ImageEvaluation> {
  File _selectedFile;
  bool _inProcess = false;

  String colorCode = '#33695d';

  getimage(ImageSource source,BuildContext context) async {
    this.setState(() {
      _inProcess = true;
    });
    // File image = await ImagePicker.pickImage(source: source);
    final _picker = ImagePicker();
    PickedFile image = await _picker.getimage(source: source);

    if (image != null) {
      // Remove crop attribute if we don't want to resize the image
      File cropped = await ImageCropper.cropImage(
        sourcePath: image.path,aspectRatio: CropAspectRatio(ratioX: 1,ratioY: 1),compressQuality: 100,// 100 means no compression
        maxWidth: 700,maxHeight: 700,compressFormat: ImageCompressFormat.jpg,androidUiSettings: AndroidUiSettings(
          toolbarColor: HexColor(colorCode),toolbarTitle: "RPS Cropper",statusBarColor: HexColor(colorCode),backgroundColor: Colors.white,//toolbarWidgetColor: HexColor(colorCode),activeControlsWidgetColor: HexColor(colorCode),//dimmedLayerColor: HexColor(colorCode),cropFrameColor: HexColor(colorCode),cropGridColor: HexColor(colorCode),),);

      this.setState(() {
        _selectedFile = cropped;
        _inProcess = false;
        //_showDelete = true;
      });

      Navigator.push(
        context,MaterialPageRoute(
          builder: (context) => UploadScreen(
            image: _selectedFile,);
    } else {
      this.setState(() {
        _inProcess = false;
      });


    }
  }


  @override
  Widget build(BuildContext context) {


    return _inProcess
        ? Loading()
        : Scaffold(
            body: StreamProvider<List<ImageProperty>>.value(
              value: User_DatabaseService().pictureData,child: SingleChildScrollView(
                child: Center(
                  child: Column(
                    children: <Widget>[
                      Text('GridView'),PictureLinkGrid(),Text('Image Evulation'),MaterialButton(
                        onpressed: () {
                          getimage(ImageSource.camera,context);
                        },color: Colors.deepOrange,child: Text(
                          'NEXT',style: TextStyle(color: Colors.white),],);
  }
}

为我的图像制作网格。 PictureGrid.dart

class PictureLinkGrid extends StatefulWidget {
  @override
  _PictureLinkGridState createState() => _PictureLinkGridState();
}

class _PictureLinkGridState extends State<PictureLinkGrid> {
  @override
  Widget build(BuildContext context) {
    final pictureData = Provider.of<List<ImageProperty>>(context) ?? [];
    final neededPicture = [];
    final demoPicture = [];

    int count = 0;

    // get Demo Picture
    pictureData.forEach((picture) {
      if (picture.title.contains('demo')) {
        demoPicture.add(picture);
      }
    });

    // get Needed Picture
    pictureData.forEach((picture) {
      if (picture.display_count < 10 && !picture.title.contains('demo')) {
        print('${picture.title} is NOT null');
        neededPicture.add(picture);
      } else {
        print('${picture.title} is null');
      }
    });

    // fill in the empty picture
    count = 0;
    while (neededPicture.length < 9) {
      neededPicture.add(demoPicture[count]);
      count++;
    }

    return GridView.builder(
        //itemCount: neededPicture.length,itemCount: neededPicture.length,shrinkWrap: true,gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),itemBuilder: (BuildContext context,int index) {
          print(
              'Picture title in picturelink grid: ${neededPicture[index].title}');
          return TouchableWebImageCard(imagePath: neededPicture[index].url);
        });
  }
}

制作可单击和未选中的ImageCard。

TouchableWebImageCard.dart

class TouchableWebImageCard extends StatefulWidget {
  String imagePath;

  TouchableWebImageCard({@required this.imagePath});

  //
  @override
  _TouchableWebImageCardState createState() =>
      _TouchableWebImageCardState(imagePath);
}

class _TouchableWebImageCardState extends State<TouchableWebImageCard> {
  // To pass parameters
  double width;
  double height;
  String imagePath;
  _TouchableWebImageCardState(this.imagePath);

  //
  bool isChecked = false;
  double sigmaX = 0.0;
  double sigmaY = 0.0;
  double showBorder = 0;

  //
  checkIcon() {
    return isChecked
        ? Center(
            child: Icon(
              Icons.check_circle,color: Colors.white,size: 50,)
        : Container();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child: SpinKitCircle(
            color: HexColor('#33695d'),Center(
          child: InkWell(
            child: Stack(
              children: <Widget>[
                FadeInImage.memoryNetwork(
                  placeholder: kTransparentimage,image: imagePath,checkIcon(),onTap: () {
              print('Image Path: $imagePath');

              if (isChecked != true) {
                setState(
                  () {
                    showBorder = 4.0;
                    isChecked = !isChecked;
                  },);
              } else {
                setState(
                  () {
                    showBorder = 0.0;
                    isChecked = !isChecked;
                  },);
              }
            },);
  }
}

解决方法

在您的TouchableWebImageCard 构造函数中,添加另一个变量int _index; 这样就能知道您选择了哪个图像。

此外,构造函数的“正确”方法是:

class TouchableWebImageCard extends StatefulWidget {
 TouchableWebImageCard({@required this.imagePath,this._index});

 String imagePath;
 int _index;
 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。