Flutter：如何在每个图像上放置按钮，如（x）以取消所选图像

Question

我在我的应用程序中使用 multi_image_picker 4.6.1，但我遇到的问题很少。如何在页面上的特定位置组织图像，并在每个选定的图像上放置取消按钮，以便用户可以像图片中那样一张一张地取消或删除选定的图像 here。提前致谢

这是我使用的代码

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:multi_image_picker/multi_image_picker.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Asset> images = List<Asset>();
  String _error = 'No Error Dectected';

  @override
  void initState() {
    super.initState();
  }

  Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length, (index) {
        Asset asset = images[index];
        return AssetThumb(
          asset: asset,
          width: 300,
          height: 300,
        );
      }),
    );
  }

  Future<void> loadAssets() async {
    List<Asset> resultList = List<Asset>();
    String error = 'No Error Dectected';

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 300,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Example App",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      images = resultList;
      _error = error;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: <Widget>[
            Center(child: Text('Error: $_error')),
            RaisedButton(
              child: Text("Pick images"),
              onPressed: loadAssets,
            ),
            Expanded(
              child: buildGridView(),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以尝试使用 Stack https://www.youtube.com/watch?v=liEGSeD3Zt8&vl=en

return Stack(
  children: <Widget>[
    AssetThumb(
      asset: asset,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 0,
      right: 0,
      child: GestureDetector(
          onTap: (){
            print('delete image from List');
              setState((){
                print('set new state of images');
              })
          },
          child: Icon(
        Icons.delete,
      ),
     ),
    ),
  ],
);

Answer 2

另一种使用 Stack 修复的方法

Stack(
        children: <Widget>[
          AssetThumb(
            asset: asset,
            width: 300,
            height: 300,
          ),
          Positioned(
              right: -2,
              top: -9,
              child: IconButton(
                  icon: Icon(
                    Icons.cancel,
                    color: Colors.black.withOpacity(0.5),
                    size: 18,
                  ),
                  onPressed: () => setState(() {
                    images.removeAt(index);
                  })))
        ],
      );

Flutter：如何在每个图像上放置按钮，如（x）以取消所选图像

Flutter: How to put button on each image like (x) to cancel selected image

image

flutter

picker

cancel-button