Question

我尝试创建一个类似于此图像的图像滑块

我尝试使用PageView创建此滑块，但是浏览量有问题

和我的代码：

class SlideMusic extends StatefulWidget{

  final Size _size;
  final List<String> _listArts;
  double itemExtent;

  SlideMusic(this._size,this._listArts){
    itemExtent = _size.width / 3;
  }

  @override
  SlideMusicState createState() => SlideMusicState();
}

class SlideMusicState extends State<SlideMusic> {

  double currentPage = 0;

  PageController _pageController = PageController(
    viewportFraction: 0.3333,
  );

  @override
  void setState(fn) {
    super.setState(fn);
    _pageController.addListener((){
      currentPage = _pageController.page;
    });
  }

  @override
  Widget build(BuildContext context) {

    return SizedBox(
        width: widget._size.width,
        height: widget.itemExtent,
        child: Container(
          color: Colors.green,
          child: NotificationListener<ScrollNotification>(
            onNotification: _onNotification,
            child:   PageView.builder(
                controller: _pageController,
                physics: BouncingScrollPhysics(),
                itemCount: widget._listArts.length,
                itemBuilder: (context, index){
                  return itemArt(widget._listArts[index], index);
                },
              ),
          )
        )
    );
  }

  bool _onNotification(ScrollNotification notification){

     setState(() {
       currentPage = _pageController.page;
       print(currentPage);
     });
  }

  double itemOffset(int index){
    return (index - currentPage ).abs()* widget.itemExtent;
  }

  Widget itemArt(String image , int index){

    Offset offset = Offset.zero;

    if(index > currentPage.round())
      offset = Offset(-itemOffset(index)/2,0);
    else
      offset = Offset(itemOffset(index)/2,0);

    return Align(
      alignment: Alignment.center,
      child: Transform.translate(
        offset: offset,
        child: Container(
            color: Colors.lightBlue,
            child: LayoutBuilder(
              builder: (context,constrat){
                return SizedBox(
                  width: constrat.maxWidth - itemOffset(index)/3.5,
                  height: constrat.maxHeight - itemOffset(index) /3.5,
                  child: Center(
                      child:  Image.asset(image)
                  ),
                );
              },
            )
        ),
      )
    );
  }
}

Answer 1

签出使用carousel_slider制作的“图片”滑块小部件。

不要介意GIF的僵硬。

代码：


class PictureSlideShow extends StatefulWidget {
  @override
  _PictureSlideShowState createState() => _PictureSlideShowState();
}

class _PictureSlideShowState extends State<PictureSlideShow> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CarouselSlider(
        height: 200.0,
        enlargeCenterPage: true,
        items: [1, 2, 3, 4, 5].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: 400,
                height: 400,
                margin: EdgeInsets.all(0.5),
                decoration:
                    BoxDecoration(color: Colors.lightBlue[100 * (i % 5)]),
                child: Center(
                  child: Text(
                    'text $i',
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              );
            },
          );
        }).toList(),
      ),
    );
  }
}

这是您想要的类似设计。

使用pageView创建图像滑块

1 个答案: