一张幻灯片中有多个项目扑-飞镖

如何解决一张幻灯片中有多个项目扑-飞镖

我想使用carousel_slider flutter包创建一个Carousel Slider。

当我想在一张幻灯片中显示多个项目时，只要列表长度为偶数，一切都可以正常工作，但是如果列表长度为奇数，则最后一张幻灯片会出错。

这是我的代码

import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80','https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80','https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80','https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80','https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80','https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];    
class MultipleItemDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Multiple item in one slide demo')),body: Container(
            child: CarouselSlider.builder(
              options: CarouselOptions(
                aspectRatio: 2.0,enlargeCenterPage: false,viewportFraction: 1,),itemCount: (imgList.length / 2).round(),itemBuilder: (context,index) {
                final int first = index * 2;
                final int second = first + 1;
                return Row(
                  children: [first,second].map((idx) {
                    return Expanded(
                      flex: 1,child: Container(
                        margin: EdgeInsets.symmetric(horizontal: 10),child: Image.network(imgList[idx],fit: BoxFit.cover),);
                  }).toList(),);
              },)
          ),);
      }
    }

解决方法

这是由于您如何计算要放入Row中的图像的索引的方式。当前，您始终对Row声明并使用first和second，如果图像数量为奇数，则Row将不起作用，因为那时没有第二个图像。我对您的解决方案进行了一些修改以使其工作。您仍然需要调整class MultipleItemDemo extends StatelessWidget { @override Widget build(BuildContext context) { int imageCount = (imgList.length / 2).round(); return Scaffold( appBar: AppBar(title: Text('Multiple item in one slide demo')),body: Container( child: CarouselSlider.builder( options: CarouselOptions( aspectRatio: 2.0,enlargeCenterPage: false,viewportFraction: 1,),itemCount: imageCount,itemBuilder: (context,index) { final int first = index; final int second = index < imageCount - 1 ? first + 1 : null; return Row( children: [first,second].map((idx) { return idx != null ? Expanded( flex: 1,child: Container( margin: EdgeInsets.symmetric(horizontal: 10),child: Image.network(imgList[idx],fit: BoxFit.cover),) : Container(); }).toList(),); },)),); } } 的大小，以使单个图像的大小与配对的图像相同：

    $trans = TranslateProject::create($request->all());
    
    event(new TranslateEvent($trans));
    return response()->json(null,200);