flutter 入门屏幕滚动指示器

Question

我正在研究我的flutter项目的入门屏幕（我还是初学者，仍在学习），入门屏幕上有一个滚动指示器，它根据页面更改而变化，所以我检查了互联网，发现我可以使用一些软件包，但它们很混乱所以我尝试自己实现它，不确定它的正确实现

 PageView.builder(
              itemCount: OnboardingItmes().items.length,
              controller: pageController,
              onPageChanged: (value) {
                setState(() {
                  scrollIndex = value;
                });
              },
              itemBuilder: (context, index) => ...

并使用一行来显示该指示器，

Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 5.0),
                        child: Container(
                          height: 15,
                          width: scrollIndex == 0 ? 40 : 20,
                          decoration: BoxDecoration(
                              color: scrollIndex == 0
                                  ? Colors.blue
                                  : Colors.grey.withOpacity(0.5),
                              borderRadius: BorderRadius.circular(15)),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(right: 5.0),
                        child: Container(
                          height: 15,
                          width: scrollIndex == 1 ? 40 : 20,
                          decoration: BoxDecoration(
                              color: scrollIndex == 1
                                  ? Colors.blue
                                  : Colors.grey.withOpacity(0.5),
                              borderRadius: BorderRadius.circular(15)),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(right: 5.0),
                        child: Container(
                          height: 15,
                          width: scrollIndex == 2 ? 40 : 20,
                          decoration: BoxDecoration(
                              color: scrollIndex == 2
                                  ? Colors.blue
                                  : Colors.grey.withOpacity(0.5),
                              borderRadius: BorderRadius.circular(15)),
                        ),
                      ),
                    ],
                  )

可以吗？或者还有更好的方法吗？

Answer 1

您可以使用

list.generate

功能来减少代码重复。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: List.generate(3, (index) => 
    Padding(
      padding: EdgeInsets.only(right: index < 2 ? 5.0 : 0),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        height: 15,
        width: scrollIndex == index ? 40 : 20,
        decoration: BoxDecoration(
          color: scrollIndex == index 
            ? Colors.blue 
            : Colors.grey.withOpacity(0.5),
          borderRadius: BorderRadius.circular(15),
        ),
      ),
    )
  ),
)