Flutter：如何获取网格中哪张图片被选中的信息？

Question

flutter如何获取grid中的哪张图片被选中的信息。请检查我的代码！我真的需要一个答案。请帮我。期待大家的来信。

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

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'),
            size: 50,
          ),
        ),
        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;
                  },
                );
              }
            },
          ),
        ),
      ],
    );
  }
}

Answer 1

在你的 TouchableWebImageCard 构造函数中添加另一个变量 int _index; 所以会知道你选择了哪张图片。

此外，构造构造函数的“正确”方法是：

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

 String imagePath;
 int _index;

Flutter：如何获取网格中哪张图片被选中的信息？

Flutter : How to get information about which picture in the grid has been selected?

provider

grid

select

dart

flutter