#flutter #dart #flutter-layout #flutter-animation
#flutter #dart #flutter-макет #flutter-анимация
Вопрос:
Я новичок в сообществе flutter. Я использовал плагин image slider для портретного изображения и плагин carousal pro для слайдера ландшафтного изображения, столкнувшись с проблемой при разделении слайдера на два изображения, когда невозможно получить разные индексные изображения при скольжении, и все работает правильно. Я хочу отображать изображения из списка изображений. Здесь необходима функция автоматического воспроизведения. Заранее спасибо.
Уже пробовал приведенный ниже код
//method
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i ) {
result.add(handler(i, list[i]));
}
return resu<
}
//swiper
swiperTwoImageShow() {
return isAutoPlay
? Center(
child: Carousel(
showIndicator: false,
autoplay: true,
images: map<Widget>(widget.imageUrl, (index, i) {
String tempOddImage;
String tempEvenImage;
index % 2 == 0 ? tempEvenImage = i : tempOddImage = i;
return Row(
children: [
Expanded(
flex: 1,
child: CachedNetworkImage(
imageUrl: tempOddImage ?? tempEvenImage,
fit: BoxFit.contain),
),
Expanded(
flex: 1,
child: CachedNetworkImage(
imageUrl: tempEvenImage ?? tempOddImage,
fit: BoxFit.contain),
),
],
);
}),
),
)
: Center(
child: ImagesSlider(
items: map<Widget>(oddArray, (index, i) {
return Row(
children: [
Expanded(
flex: 1,
child: Container(
width: Utils.getDeviceWidth(context),
child: CachedNetworkImage(
imageUrl: i, fit: BoxFit.contain),
),
),
Expanded(
flex: 1,
child: Container(
width: Utils.getDeviceWidth(context),
child: CachedNetworkImage(
imageUrl: i, fit: BoxFit.contain),
),
),
],
);
}),
autoPlay: false,
viewportFraction: 1.0,
aspectRatio: 1.0,
distortion: false,
updateCallback: (index) {
setState(() {
_current = index;
});
},
),
);
}
Ответ №1:
Попробуйте использовать приведенный ниже код:
swipeTwoImageShow() {
return isReloading
? Container()
: Align(
alignment: Alignment.center,
child: CarouselSlider.builder(
options: CarouselOptions(
initialPage: widget.index,
aspectRatio:
MediaQuery.of(context).orientation == Orientation.portrait
? 1
: (MediaQuery.of(context).size.width / 3) /
(MediaQuery.of(context).size.height / 2.2),
viewportFraction: 1,
autoPlay: isAutoPlay),
itemCount: summaryShow
? ((widget.shortDescription.sommaire.length - 1) / 2).round()
: ((widget.imageUrl.length - 1) / 2).round(),
carouselController: carouselController,
itemBuilder: (context, index) {
final int first = index * 2;
final int second = first 1;
return Row(
children: [first, second].map((idx) {
return Container(
height: Utils.getDeviceHeight(context),
width: MediaQuery.of(context).orientation ==
Orientation.portrait
? Utils.getDeviceWidth(context) / 2
: Utils.getDeviceWidth(context) / 3,
child: CachedNetworkImage(
imageUrl: summaryShow
? widget.shortDescription.sommaire[idx].pageUrl
: widget.imageUrl[idx],
fit: MediaQuery.of(context).orientation ==
Orientation.landscape
? BoxFit.fill
: BoxFit.contain,
height: MediaQuery.of(context).orientation ==
Orientation.portrait
? Utils.getDeviceHeight(context)
: Utils.getDeviceHeight(context) / 2,
width: MediaQuery.of(context).orientation ==
Orientation.portrait
? Utils.getDeviceWidth(context) / 2
: Utils.getDeviceWidth(context) / 3,
),
);
}).toList(),
);
},
),
);
}