Flutter TabBar 类指示器

Question

我需要帮助确定一个 Flutter 小部件，该小部件可以执行此 GIF 演示的操作：

我对允许我浏览上述度假村位置的圆形指示器感兴趣。 到目前为止，我发现的最接近的东西是TabBar ，但这并不是我真正想要的。 修改它以完成 GIF 所做的事情似乎太复杂了，而且我非常确定有一个更简单的解决方案，但是经过数小时详尽搜索小部件列表后，我不确定要寻找什么。

有人可以帮我吗？

Answer 1

根据您的 UI，您可以使用dots_indicator或更好smooth_page_indicator

class TestSnippet extends StatefulWidget {
  const TestSnippet({super.key});

  @override
  State<TestSnippet> createState() => _TestSnippetState();
}

class _TestSnippetState extends State<TestSnippet> {
  final PageController controller = PageController();

  int itemCount = 44;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              itemCount: itemCount ~/ 3,
              controller: controller,
              itemBuilder: (context, index) => Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(
                    index.toString(),
                  ),
                  Text("${index + 1}"),
                  Text("${index + 2}"),
                ],
              ),
            ),
          ),
          SmoothPageIndicator(
            count: itemCount ~/ 3,
            controller: controller,
          )
        ],
      ),
    );
  }
}