扑动点指示器到浏览量

Posted 2023-02-23

【中文标题】扑动点指示器到浏览量

【英文标题】：flutter dot indicator to pageview

【发布时间】：2020-12-23 19:21:05

【问题描述】：

我想为综合浏览量添加一个点指示符。当一个人将图像从右到左滚动时，我的代码上的图像会发生变化。那里没问题，但我无法在我的代码中添加点指示符。当我滚动图像时如何放置点指示器，点也会切换到图像的顺序.......................... ..................................................... …………

                            PageView.builder(
                    itemCount: totalCards.toInt(),
                    itemBuilder: (context, i) 
                      return Container(
                          margin: EdgeInsets.only(top: 10),
                          child: Container(
                            child: Column(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Expanded(
                                  child: PageView(
                                    children: <Widget>[
                                      Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(4.0),
                                            image: DecorationImage(
                                                image: AssetImage(
                                                    photos[startphoto]),
                                                fit: BoxFit.cover)),
                                      ),
                                      Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(4.0),
                                            image: DecorationImage(
                                                image: AssetImage(
                                                    photos[startphoto1]),
                                                fit: BoxFit.cover)),
                                      ),
                                      Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(4.0),
                                            image: DecorationImage(
                                                image: AssetImage(
                                                    photos[startphoto2]),
                                                fit: BoxFit.fitHeight)),
                                      ),
                                      Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(4.0),
                                            image: DecorationImage(
                                                image: AssetImage(
                                                    photos[startphoto3]),
                                                fit: BoxFit.cover)),
                                      ),

                                    ],
                                  ),
                                ),
                              ],
                            ),
                          )
                      );
                    ,
                  ),
                ),

【参考方案1】：

你可以用这个包做到这一点：https://pub.dev/packages/page_view_indicators

在示例中您可以看到如何实现它。

编辑：像这样实现你的点指示器：

class HomeScreen extends StatefulWidget 
  @override
  _HomeScreenState createState() => _HomeScreenState();


class _HomeScreenState extends State<HomeScreen> 
  final ValueNotifier<int> _pageNotifier = new ValueNotifier<int>(0);
  final PageController _pageController = new PageController();

  @override
  Widget build(BuildContext context) 
    return Column(
      children: [
        PageView.builder(
          itemCount: totalCards.toInt(),
          controller: _pageController,
          itemBuilder: (context, i) 
            ...
          ,

          onPageChanged:(index) 
            setState(() 
              _pageNotifier.value = index;
            );
          ,
        ),
        Center(
          child: CirclePageIndicator(
            currentPageNotifier: _pageNotifier,
            itemCount: totalCards.toInt(),
          ),
        )
      ],
    );
  

【讨论】：

谢谢，但我已经试过了，我对 Flutter 和编码有点陌生...