这个应用程序有两个轮播幻灯片在同一行运行，但我只想要一个。请告诉我啥是问题

Posted 2023-02-23

【中文标题】这个应用程序有两个轮播幻灯片在同一行运行，但我只想要一个。请告诉我啥是问题

【英文标题】：There are two carousel slides running in same line this app but I want only one. please tell me what is Problem这个应用程序有两个轮播幻灯片在同一行运行，但我只想要一个。请告诉我什么是问题

【发布时间】：2021-07-30 09:05:43

【问题描述】：

这段代码没有错误 但对于导致这两个滑块的原因一无所知。 在这个 android 模拟器中查看两个旋转木马。 请告诉我这段代码有什么问题。 不明白现在写什么，这个stockoverflow被告知多久了，补充一些细节， 心被宠坏了，所以才写到这里，不好意思，不关注这个，关注提问。

import 'dart:convert';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class Carousel extends StatefulWidget 
  @override
  _CarouselState createState() => _CarouselState();

class _CarouselState extends State<Carousel> 

  var api = Uri.parse('http://192.168.43.162/flutter/bannerApi.php');
  var response;
  var bannerApi;
  @override

  void initState() 
    super.initState();
// for loading
    fetchData();


  
  fetchData() async 
    response = await http.get(api);
    print(response.body);
    bannerApi = jsonDecode(response.body);

    setState(() );
  
  @override
  Widget build(BuildContext context) 

    return Scaffold(
           body: Center(
          child: response != null
              ? Stack(

                  children: List.generate(
                  bannerApi.length,
                  (index) => CarouselSlider(
                    items: [

                      //1st Image of Slider
                      Container(
                        margin: EdgeInsets.all(6.0),
                        decoration: BoxDecoration(

                          borderRadius: BorderRadius.circular(8.0),
                          image: DecorationImage(
                            image: NetworkImage(bannerApi[index]['img']),
                            // image: AssetImage(assignmets[index]['img']),

                            fit: BoxFit.cover,
                          ),
                        ),
                      ),

                    ],
                    //Slider Container properties
                    options: CarouselOptions(
                      height: 180.0,

                      enlargeCenterPage: true,
                      autoPlay: true,
                      aspectRatio: 16 / 9,
                      autoPlayCurve: Curves.fastOutSlowIn,

                      enableInfiniteScroll: true,
                      autoPlayAnimationDuration: Duration(milliseconds: 800),
                      viewportFraction: 0.8,
                    ),

                  ),
                ))
              : CircularProgressIndicator(
                  backgroundColor: Colors.white,

                )),
    );
  

这是一个api数据。

["img":"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80","img":"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80","img":"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80","img":"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80","img":"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80","img":"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"]

【问题讨论】：

你正在为每个bannerApi项目创建一个轮播。

那么我应该如何使用API​​将图像带入轮播滑块

你可以在堆栈内有一个轮播，对于堆栈项目，你可以使用 list.generate

看不懂代码里要做什么，能不能修改一下代码给个？如果你不介意的话。

@HabibMhamadi ***.com/questions/67537861/…，请检查这个我不明白这段代码有什么问题

【参考方案1】：

我使用的是容器而不是你的堆栈。

Container(
 child: CarouselSlider(
   items: List.generate(
    bannerApi.length,
    (index) => Container(
       margin: edgeInsects.all(6.0)
       ...

【讨论】：

请检查这个***.com/questions/67515391/…