Question

我有多个图像，每个图像都有自己的重定向链接。目前，使用列表视图构建以在手势检测器中显示图像时可以很好地进行显示。

但是，我想添加一个点指示器以显示正在查看的图像。如何获取正在显示的图像的索引？或向左或向右滑动时增加/减少计数器。

我研究过轮播，但似乎不允许每张图片重定向到其他地方。

Answer 1

根据上面@chunhunghan在注释中所指的示例，您需要替换map<Widget> ( (image, url) {..} 与 imgList.map((image) {int index = imgList.indexOf(image); ..}

我能够将其用于上述更改。修改后的构建方法代码段：

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      CarouselSlider(
        items: child,
        autoPlay: false,
        enlargeCenterPage: true,
        aspectRatio: 2.0,
        onPageChanged: (index) {
          setState(() {
            _current = index;
            print("${_current}");
          });
        },
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: imgList.map((image) {       //these two lines 
            int index=imgList.indexOf(image); //are changed
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _current == index
                      ? Color.fromRGBO(0, 0, 0, 0.9)
                      : Color.fromRGBO(0, 0, 0, 0.4)),
            );
          },
        ),
      ),
    ]);
  }

Answer 2

Slider 或 Flutter Carousel 上的垂直指示器


class VerticalSlider extends StatefulWidget {
  @override
  _VerticalSliderState createState() => _VerticalSliderState();
}
class _VerticalSliderState extends State<VerticalSlider> {

  List imageSliders=[
//add your items here
];
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Vertical sliding carousel ')),
      body: Stack(

        children: [
          Container(
            child: CarouselSlider(
              options: CarouselOptions(
                viewportFraction: .6,
                aspectRatio: 1.2,
                enlargeCenterPage: true,
                scrollDirection: Axis.vertical,
                autoPlay: true,
                 onPageChanged: (index, reason) {
                setState(() {
                  _current = index;
                });
              }
              ),
              items: imageSliders,
            )
          ),
           Positioned(
            top: 50,
            right: 10,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: imgList.map((url) {
                int index = imgList.indexOf(url);
                return Container(
                  width: 8.0,
                  height: 8.0,
                  margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 2.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _current == index
                      ? Colors.white60
                      : Color.fromRGBO(0, 0, 0, 0.4),
                  ),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

您也可以添加自定义指标。

Answer 3

如果我了解您，请清除。与软件包https://pub.dev/packages/carousel_slider 向左或向右滑动图像可从onPageChanged事件获取当前页面
并使用InkWell换行图像，则可以导航到其他页面。在我的演示中，只需打印点击消息

代码段

final List child = map<Widget>(
  imgList,
  (index, i) {
    return Container(
      margin: EdgeInsets.all(5.0),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
        child: Stack(children: <Widget>[
          InkWell(
              onTap: () { print("you click  ${index} "); },
              child: Image.network(i, fit: BoxFit.cover, width: 1000.0)),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                ),
              ),
              padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
              child: Text(
                'No. $index image',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  },
).toList();

...

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      CarouselSlider(
        items: child,
        autoPlay: false,
        enlargeCenterPage: true,
        aspectRatio: 2.0,
        onPageChanged: (index) {
          setState(() {
            _current = index;
            print("${_current}");
          });
        },
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: map<Widget>(
          imgList,
          (index, url) {
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _current == index
                      ? Color.fromRGBO(0, 0, 0, 0.9)
                      : Color.fromRGBO(0, 0, 0, 0.4)),
            );
          },
        ),
      ),
    ]);
  }
}

Answer 4

我找到的解决方案，除了改地图使用imgList，是将.toList()放在imgList.map函数返回如下：

@override
   Widget build(BuildContext context) {
    return Column(children: [
      CarouselSlider(
        items: child,
        autoPlay: false,
        enlargeCenterPage: true,
        aspectRatio: 2.0,
        onPageChanged: (index) {
          setState(() {
            _current = index;
            print("${_current}");
          });
        },
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: imgList.map((image) {     
            int index=imgList.indexOf(image);
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _current == index
                      ? Color.fromRGBO(0, 0, 0, 0.9)
                      : Color.fromRGBO(0, 0, 0, 0.4)
              ),
            );
          },
        ).toList(), // this was the part the I had to add
      ),
    ]);
  }

颤振水平列表视图点指示器

4 个答案: