在Flutter中使用文本位于图像下方的Carousel滑块

ycl3bljg  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(162)

我不知道如何使用或在哪里使用旋转木马滑块下面的文字图像。

return Scaffold(
      body: ListView(
        children: [
          CarouselSlider(
            items: [
              Container(
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                        image: NetworkImage('assets/images/phone.jpg'))),
              ),
            ],
            options: CarouselOptions(
              height: 300,
              enlargeCenterPage: true,
              autoPlay: true,
              aspectRatio: 16 / 9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: Duration(seconds: 1),
              viewportFraction: 0.8,
            ),
            
          )
        ],
      ),
    );

我已经尝试了上面的代码,但它现在显示我的任何图像,我感到困惑,从哪里我需要开始添加文本。

hs1rzwqc

hs1rzwqc1#

您需要将Container替换为Column才能达到相同的效果。

由此:

CarouselSlider(
            items: [
              Container(
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                        image: NetworkImage('assets/images/phone.jpg'))),
              ),
              ...
            )

致:

CarouselSlider(
            items: [
              Column(
                children: [
                  Container(
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                            image: NetworkImage('assets/images/phone.jpg'))),
                  ),
                  Text('Carousel text')
                ],
              ),

相关问题