Flutter 在已知位置的轮播中添加图像
Flutter add images in carousel with known position
我目前在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,
),
],
)
],
),
);
}
}
有效！！！太棒了！！
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);
});
}
}
添加int pageIndex = 0;
将onPageChanged属性添加到CarouselSlider:
onPageChanged: (index, reason) {
pageIndex = index;
}
更改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
});
}
更改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,
),
],
)
],
),
)
);
}
}
我目前在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,
),
],
)
],
),
);
}
}
有效！！！太棒了！！
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);
});
}
}
添加
int pageIndex = 0;将
onPageChanged属性添加到CarouselSlider:onPageChanged: (index, reason) { pageIndex = index; }更改
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 }); }更改
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,
),
],
)
],
),
)
);
}
}