如何为轮播图像提供全屏宽度?

fiz*_*ata 1 carousel flutter

我正在学习颤振中的轮播。我想为轮播图像提供全屏宽度。但是宽度是由轮播本身自动获取的。有什么办法可以让图像在轮播内具有全屏宽度?在这里,我同时使用了 carousel_pro 和 carousel_slider,两者都按我的预期工作。请帮忙。

  List _images = [
    Image.network(
        "https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen"),
    Image.network(
        "https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5"),
    Image.network(
        "https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png"),
    Image.network(
        "https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa"),
    Image.network(
        "https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg"),
  ];

  List _images2 = [
    "https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen",
    "https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5",
    "https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png",
    "https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa",
    "https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg",
  ];



            Carousel(
                images: _images,
                autoplay: true,
                boxFit: BoxFit.fitWidth,
                dotBgColor: Colors.transparent,
                dotSize: 3,
                dotColor: Colors.red,
                dotIncreasedColor: Colors.red,
                autoplayDuration: Duration(seconds: 3),
                animationCurve: Curves.fastOutSlowIn,
              ),
            ),
            SizedBox(height: 20),
            CarouselSlider(
              items: _images2
                  .map(
                    (x) => Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(x, scale: 1),
                        ),
                      ),
                    ),
                  )
                  .toList(),
              autoPlay: true,
              height: 200.0,
            ),
Run Code Online (Sandbox Code Playgroud)

Ars*_*ria 20

CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 1,
Run Code Online (Sandbox Code Playgroud)

  • 视口分数用于设置轮播滑块的宽度,如果为 1,则它将使用 100% 的屏幕,但默认情况下为 80%。 (2认同)

小智 0

这是示例,希望对您有用

 List<String> imgList;

     CarouselSlider(
                        items: map<Widget>(
                          imgList,
                          (index, i) {                    
                     return Container(
                              margin: EdgeInsets.all(5.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                child: Stack(children: <Widget>[
                                  InkResponse(
                                      child: Image.network(i,
                                          fit: BoxFit.cover, width: 1000.0),
                                      onTap: //....
Run Code Online (Sandbox Code Playgroud)