Question

我想在网页浏览量中添加点指示器。当一个人从右向左滚动图像时，图像在我的代码上也会更改。那里没有问题，但是我无法在代码中添加点指示器。当我在图像上滚动时如何放置点指示器，并且点也切换到图像的顺序。 ................................................... ..........................

                            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)),
                                      ),

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

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

颤动点指示器到综合浏览量

1 个答案: