Flutter在轮播中添加具有已知位置的图像

编程问答 2022-07-23

问题描述

我目前有一个旋转木马，可以在其中添加和删除图像，但是问题是我可以在旋转木马中的最后一张照片之后添加。

同样，我只能按顺序删除最后一张照片。

如何根据轮播中的用户位置选择要删除的图片或在哪里添加图片？

我通过调用特定方法（一种用于添加的方法，另一种用于删除的方法）使用两个按钮，一个用于添加图片，另一个用于删除图片。

这是代码

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:Flutter/material.dart';
import 'package:font_awesome_Flutter/font_awesome_Flutter.dart';
import 'package:image_picker/image_picker.dart';

class ProductCarousel extends StatefulWidget {
  @override
  _ProductCarouselState createState() => _ProductCarouselState();
}

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source,this.path});
}

class _ProductCarouselState extends State<ProductCarousel> {
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",path:
        'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),ImageConfig(
        source: "http",path:
        'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),path:
        'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;

  final picker = ImagePicker();

  Future getimage() async {
    final pickedFile = await picker.getimage(source: ImageSource.gallery);

    setState(() {
      imgList.add(ImageConfig(source: "file",path: pickedFile.path));
    });
  }

  Future deleteImage() async {
    setState(() {
      imgList.removeLast();
    });
  }

  @override
  Widget build(BuildContext context) {
    imageSliders = imgList
        .map(
          (item) =>
          Container(
            child: Container(
              margin: EdgeInsets.all(5.0),child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),child: Stack(
                    children: <Widget>[
                      item.source == "http"
                          ? Image.network(item.path,fit: BoxFit.cover,width: 1000.0)
                          : Image.file(File(item.path),width: 1000.0),Positioned(
                        bottom: 0.0,left: 0.0,right: 0.0,child: Container(
                          decoration: Boxdecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200,0),Color.fromARGB(0,0)
                              ],begin: Alignment.bottomCenter,end: Alignment.topCenter,),padding: EdgeInsets.symmetric(
                              vertical: 10.0,horizontal: 20.0),],)),)
        .toList();

    return Container(
     child: Column(
        children: <Widget>[
          CarouselSlider(
            options: CarouselOptions(
                autoplay: false,aspectRatio: 2.0,enlargeCenterPage: true,enlargeStrategy: CenterPageEnlargeStrategy.height,pauseAutoplayOnManualNavigate: true,pauseAutoplayOnTouch: true,scrollDirection: Axis.horizontal),items: imageSliders,Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
              FlatButton(
                               padding: EdgeInsets.all(8.0),splashColor: Colors.tealAccent,child: Row(
                  children: <Widget>[
                    Icon(FontAwesomeIcons.plus),onpressed: getimage,FlatButton(
                padding: EdgeInsets.all(8.0),splashColor: Colors.red,child: Row(
                  children: <Widget>[
                    Icon(FontAwesomeIcons.trashAlt),onpressed: deleteImage,)
        ],);
  }
}

解决方法

  1. 添加int pageIndex = 0;

  2. 将onPageChanged属性添加到CarouselSlider：

    onPageChanged: (index,reason) {
  pageIndex = index;
}

  3. 更改getImage()：

    Future getImage() async {
  final pickedFile = await picker.getImage(source: ImageSource.gallery);

  setState(() {
    //imgList.add(ImageConfig(source: "file",path: pickedFile.path));
    if (pageIndex == 0)
      imgList.add(ImageConfig(source: "file",path: pickedFile.path));
    else 
      imgList.insert(pageIndex + 1,ImageConfig(source: "file",path: pickedFile.path)); //insert after current image
  });
}

  4. 更改deleteImage()：

    Future deleteImage() async {
 setState(() {
   //imgList.removeLast();
   imgList.removeAt(pageIndex); //remove current image
 });
}

完整代码：

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';

class ProductCarousel extends StatefulWidget {
  @override
  _ProductCarouselState createState() => _ProductCarouselState();
}

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source,this.path});
}

class _ProductCarouselState extends State<ProductCarousel> {
  int pageIndex = 0;

  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",path:
        'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),ImageConfig(
        source: "http",path:
        'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),path:
        'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;

  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      //imgList.add(ImageConfig(source: "file",path: pickedFile.path));
      if (pageIndex == 0)
        imgList.add(ImageConfig(source: "file",path: pickedFile.path));
      else 
        imgList.insert(pageIndex + 1,path: pickedFile.path));
    });
  }

  Future deleteImage() async {
    setState(() {
      //imgList.removeLast();
      imgList.removeAt(pageIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    imageSliders = imgList
        .map(
          (item) =>
          Container(
            child: Container(
              margin: EdgeInsets.all(5.0),child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),child: Stack(
                    children: <Widget>[
                      item.source == "http"
                          ? Image.network(item.path,fit: BoxFit.cover,width: 1000.0)
                          : Image.file(File(item.path),width: 1000.0),Positioned(
                        bottom: 0.0,left: 0.0,right: 0.0,child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200,0),Color.fromARGB(0,0)
                              ],begin: Alignment.bottomCenter,end: Alignment.topCenter,),padding: EdgeInsets.symmetric(
                              vertical: 10.0,horizontal: 20.0),],)),)
        .toList();

    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
              CarouselSlider(
                options: CarouselOptions(
                    autoPlay: false,aspectRatio: 2.0,enlargeCenterPage: true,enlargeStrategy: CenterPageEnlargeStrategy.height,pauseAutoPlayOnManualNavigate: true,pauseAutoPlayOnTouch: true,scrollDirection: Axis.horizontal,onPageChanged: (index,reason) {
                      pageIndex = index;
                    }
                ),items: imageSliders,Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
                  FlatButton(
                                  padding: EdgeInsets.all(8.0),splashColor: Colors.tealAccent,child: Row(
                      children: <Widget>[
                        Icon(FontAwesomeIcons.plus),onPressed: getImage,FlatButton(
                    padding: EdgeInsets.all(8.0),splashColor: Colors.red,child: Row(
                      children: <Widget>[
                        Icon(FontAwesomeIcons.trashAlt),onPressed: deleteImage,)
            ],)
    );
  }
}
,

有效！！！太棒了！

import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class ProductCarousel extends StatefulWidget {
  @override
  _ProductCarouselState createState() => _ProductCarouselState();
}

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source,this.path});
}

class _ProductCarouselState extends State<ProductCarousel> {
  int _currentPosition = 0;
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",path:
            'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),path:
            'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),path:
            'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    imageSliders = imgList.map((item) {
      print(item.path);
      return Container(
        child: Container(
          margin: EdgeInsets.all(5.0),child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),child: Stack(
                children: <Widget>[
                  item.source == "http"
                      ? Image.network(item.path,width: 1000.0)
                      : Image.file(File(item.path),Positioned(
                    bottom: 0.0,child: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color.fromARGB(200,0)
                          ],padding: EdgeInsets.symmetric(
                          vertical: 10.0,);
    }).toList();

    return Container(
      child: Column(
        children: <Widget>[
          CarouselSlider(
            options: CarouselOptions(
                autoPlay: false,onPageChanged: (position,reason) =>
                    {_currentPosition = position},scrollDirection: Axis.horizontal),Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
              FlatButton(
                padding: EdgeInsets.all(8.0),child: Row(
                  children: <Widget>[ Icon(FontAwesomeIcons.plus)],FlatButton(
                padding: EdgeInsets.all(8.0),child: Row(
                  children: <Widget>[
                    Icon(FontAwesomeIcons.trashAlt),onPressed: () {
                  deleteImage();
                },)
        ],);
  }

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

   
    var item = ImageConfig(source: "file",path: pickedFile.path);

    setState(() {
      imgList.insert(_currentPosition,item);
    });
  }

  Future deleteImage() async {
    setState(() {
      imgList.removeAt(_currentPosition);
    });
  }
}
carouseldart