小贝子编程

Flutter在具有已知位置的转盘中添加图像



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

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

如何根据用户在转盘中的位置选择要删除的图片或将其添加到何处？

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

这是代码

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'),
ImageConfig(
source: "http",
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),
fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 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'),
ImageConfig(
source: "http",
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, ImageConfig(source: "file", 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),
fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 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'),
ImageConfig(
source: "http",
path:
'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),
ImageConfig(
source: "http",
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,
fit: BoxFit.cover, width: 1000.0)
: Image.file(File(item.path),
fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 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,
onPageChanged: (position, reason) =>
{_currentPosition = position},
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();
},
),
],
)
],
),
);
}
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);
});
}
}

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium