如何在flutter中实现这种类型的图像滑块

Question

​

​

我需要像在图像中一样实现图像轮播。我已经完成了图像轮播的实现，没有在我的code.When循环部分中的循环头像部分被点击图像必须被更改

 Stack(
        children: [
          Container(
            width: width * 1,
            height: height * 1,

            child: PageView.builder(
                controller: _controller,
                scrollDirection: Axis.horizontal,
                itemCount: photos.length,
                itemBuilder: (context, photoIndex) {
                  return _buildImageState(photoIndex, width, height);
                }),
          ),
          SelectedPhoto(photoIndex: photoIndex,numberOfDots: photos.length,)
        ],
      ),
    );
  }

  Widget _buildImageState(int photoIndex, double width, double height) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.transparent,
        image: DecorationImage(
          image: AssetImage(photos[photoIndex]),
          fit: BoxFit.fill,
        ),
      ),
      child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,



                  colors: [Colors.transparent, Colors.white],
                  stops: [
                  0.5,
                  0.75,
                  ]
              )
          )),
    );
  }
}

Answer 1

让我给你一个想法。

在StateFul小部件中声明一个变量。int selectedIndex = 0;

而不是PageView构建器，尝试如下所示。

PageView( 
     controller: _controller,
     scrollDirection: Axis.horizontal,
     children: [for(int i=0; i< photos.length; i++) _buildImageState(i, width, height)],
),

在SelectedPhoto小部件中，您可以这样做，

SelectedPhoto(photoIndex: selectedIndex ,numberOfDots: photos.length,)

在您的方法中，您可以使用GestureDetector小部件来处理点击事件。

Widget _buildImageState(int photoIndex, double width, double height) {
    return GestureDetector(
    onTap: () => {
        if (_controller.hasClients) {
            _controller.jumpToPage(photoIndex);
        }
       setState(() {
          selectedIndex = photoIndex
       });
    },
    child: Container(
      decoration: BoxDecoration(
        color: Colors.transparent,
        image: DecorationImage(
          image: AssetImage(photos[photoIndex]),
          fit: BoxFit.fill,
        ),
      ),
      child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.transparent, Colors.white],
                  stops: [
                  0.5,
                  0.75,
                  ]
              )
           )
         ),
       )
    );
  }
}

希望这适合你的情况。