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

Question

我需要像在图像中那样实现图像轮播。我已经在我的代码中完成了没有圆形头像部分的图像轮播实现。当点击圆形部分时，必须更改图像

 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 builder，尝试这样的事情。

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,
                  ]
              )
           )
         ),
       )
    );
  }
}

希望这适合你的情况。