旋转木马滑块显示多个图像

时间:2020-07-26 15:48:35

标签: flutter dart slider carousel

我想显示一个这样的轮播,可以在其中水平滚动图像。 Carousel

到目前为止,我已经实现了这一点。我将此包用于滑块https://pub.dev/packages/carousel_slider/example

   SafeArea(
    child: SingleChildScrollView(
      child: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        color: Color(0xFFFFE97D),
        child: Padding(
          padding: EdgeInsets.only(top: 20.0),
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 100,
                color: Color(0xFFC90303),
                child: Padding(
                  padding: EdgeInsets.only(left: 20.0, top: 10.0),
                  child: Text(
                    "APPLY NOW",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              Positioned(
                top: 50,
                left: 30,
                width: 100,
                height: 100,
                child: CarouselSlider(
                  options: CarouselOptions(
                    autoPlay: true,
                    aspectRatio: 1.0,
                    enlargeCenterPage: true,
                  ),
                  items: imageSliders,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),

这是imageSliders。

final List<Widget> imageSliders = imgList
.map((item) => Container(
      child: Container(
        margin: EdgeInsets.all(5.0),
        child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
            child: Stack(
              children: <Widget>[
                Image.network(item, fit: BoxFit.cover, width: 1000.0),
                Positioned(
                  bottom: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Color.fromARGB(200, 0, 0, 0),
                          Color.fromARGB(0, 0, 0, 0)
                        ],
                        begin: Alignment.bottomCenter,
                        end: Alignment.topCenter,
                      ),
                    ),
                    padding: EdgeInsets.symmetric(
                        vertical: 10.0, horizontal: 20.0),
                    child: Text(
                      'No. ${imgList.indexOf(item)} image',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            )),
      ),
    ))
.toList();

但是我得到的是图像包含在一个空间中,如何使它们散开?就像上面的图片。

0 个答案:

没有答案