как отобразить два изображения на одной странице слайдера в flutter

#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(),
                );
              },
            ),
          );
  }