首页 > 解决方案 > Flutter carousel_slider 通过按钮单击更改图像数组

问题描述

我有 3 个按钮,每个按钮都有图像数组,我需要在单击按钮时更改轮播项目。现在我已经通过选项卡实现了它,但是它非常重地加载了应用程序,动画变得很慢,好像 FPS 下降了一样。只想使用一个滑块并在单击按钮时更改其内容。但是我没有在轮播API中找到它。

我的代码:

final List < String > imgList = [
    'assets/category/pubg.png',
    'assets/category/sparta.jpg',
    'assets/category/stormfall-age-of-war.jpg',
    'assets/category/warface.jpg',
    'assets/category/warface-logo.jpg',
    'assets/category/playstation.png'
];

final List < Widget > imageSliders = imgList
    .map((item) => Container(
        child: Container(
            //margin: EdgeInsets.symmetric(horizontal: 5),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
                child: Stack(
                    children: < Widget > [
                        Image.asset(item, fit: BoxFit.cover, width: 1000.0),
                        Positioned(
                            bottom: 0.0,
                            left: 0.0,
                            right: 0.0,
                            child: Column(
                                mainAxisSize: MainAxisSize.max,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: < Widget > [
                                    Container(
                                        decoration: BoxDecoration(color: Colors.white),
                                        padding: EdgeInsets.only(top: 10.0),
                                        child: Text(
                                            'Slide # ${imgList.indexOf(item)}',
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                                color: const Color(0xFF4F4F4F),
                                                    fontSize: 16,
                                                    fontWeight: FontWeight.bold,
                                            ),
                                        ),
                                    ),
                                    Container(
                                        decoration: BoxDecoration(color: Colors.white),
                                        padding: EdgeInsets.only(bottom: 10.0),
                                        child: Text(
                                            'Slide # ${imgList.indexOf(item)}',
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                                color: const Color(0xFFA5ABC8),
                                                    fontSize: 12,
                                            ),
                                        ),
                                    ),
                                ],
                            ),
                        ),
                    ],
                )),
        ),
    ))
    .toList();


CarouselSlider(
    options: CarouselOptions(
        autoPlay: false,
        aspectRatio: 2.0,
        enlargeCenterPage: true,
        viewportFraction: 0.6,
        onPageChanged: (index, reason) {
            setState(() {
                _current = index;
            });
        }
    ),
    items: imageSliders,
),

标签: flutterandroid-studiodart

解决方案


推荐阅读