Android Studio 我在flutter应用程序中使用ImageSlideshow,但我需要在幻灯片上添加一些图标,

vsdwdz23  于 2022-11-16  发布在  Android
关注(0)|答案(2)|浏览(103)
Center(
            child: Container(
              height: height * 0.3,
              width: width * 0.8,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
              ),
              child: ImageSlideshow(
                indicatorColor: HexColor('#FFA300'),
                onPageChanged: (value) {},
                autoPlayInterval: 3000,
                isLoop: true,
                children: [
                  Image.asset(
                    'assets/images/sample1.png',
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/sample2.png',
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/board3.jpeg',
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            ),
          ),

1.这是ImageSlideshow部件的代码。2我需要帮助,请?
1.通常方法是用容器中的容器,但这个似乎不对

knpiaxh1

knpiaxh11#

我在你的问题中看不到图像,但是看看你的代码,假设你在pub.dev上使用flutter_image_slideshow包,你可以使用Stack小部件将图像和图标作为一个“幻灯片”的一部分显示。
下面是一个示例,其中第一张幻灯片在图像顶部有图标,但其他幻灯片没有演示ImageSlideshow接受任何部件作为子部件。

return Center(
  child: Container(
    height: height * 0.3,
    width: width * 0.8,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
    ),
    child: ImageSlideshow(
      indicatorColor: HexColor('#FFA300'),
      onPageChanged: (value) {},
      autoPlayInterval: 3000,
      isLoop: true,
      children: [
        Stack(children: [
          Image.asset(
            'assets/images/sample1.png',
            fit: BoxFit.cover,
          ),
          const Icon(Icons.star)
        ]),
        Image.asset(
          'assets/images/sample2.png',
          fit: BoxFit.cover,
        ),
        Image.asset(
          'assets/images/board3.jpeg',
          fit: BoxFit.cover,
        ),
      ],
    ),
  ),
);

希望能有所帮助。

9lowa7mx

9lowa7mx2#

我用一个Stack小部件 Package 了ImageSlideshow小部件,并在Container中使用了一个Row,然后使用alignment属性来分配Row的位置

Stack(
                children: [
                  ImageSlideshow(
                  indicatorColor: HexColor('#FFA300'),
                  onPageChanged: (value) {},
                  autoPlayInterval: 3000,
                  isLoop: true,
                  children: [
                    Image.asset(
                      'assets/images/sample1.png',
                      fit: BoxFit.cover,
                    ),
                    Image.asset(
                      'assets/images/sample2.png',
                      fit: BoxFit.cover,
                    ),
                    Image.asset(
                      'assets/images/board3.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
                  Container(
                    padding: EdgeInsets.only(top: 20, left: 10, right: 10),
                    alignment: Alignment.topCenter,
                    child: Row(
                      children: [
                        Icon(Icons.arrow_back_ios),
                        SizedBox(width: width * 0.5,),
                        Icon(Icons.ios_share),
                        Icon(Icons.favorite_border),
                      ],
                    ),
                  ),
                ]
              )

这应该能解决问题

相关问题