Flutter 自定义页面指示器

Question

我正在开发一个 Flutter 项目，我需要帮助创建特定的 UI 组件。我附上了我想要复制的组件的照片。这是我想要的设计：

我需要什么：

我正在寻找有关如何在 Flutter 中正确实现此组件的指导。具体来说，我不确定使用哪些小部件或如何构建布局来实现此设计。

Answer 1

您可以从这里开始并重构以下内容：

class _MyHomePageState extends State<MyHomePage> {
  int pageIndex = 0;
  var controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                buildIndicatorItem(
                    (pageIndex >= 0) ? Colors.green : Colors.grey, 1),
                Container(
                  width: 50,
                  child: Divider(
                    color: (pageIndex >= 0) ? Colors.green : Colors.grey,
                  ),
                ),
                buildIndicatorItem(
                    (pageIndex >= 1) ? Colors.green : Colors.grey, 2),
                Container(
                  width: 50,
                  child: Divider(
                      color: (pageIndex >= 1) ? Colors.green : Colors.grey),
                ),
                buildIndicatorItem(
                    (pageIndex == 2) ? Colors.green : Colors.grey, 3),
              ],
            ),
            Expanded(
                child: PageView(
                    onPageChanged: (index) {
                      setState(() {
                        pageIndex = index;
                      });
                    },
                    controller: controller,
                    children: [
                  Center(child: Text('Page 1 ')),
                  Center(child: Text('Page 2 ')),
                  Center(child: Text('Page 3 ')),
                ])),
            Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
              FloatingActionButton(
                heroTag: 'btn1',
                onPressed: () {
                  controller.previousPage(
                      duration: Duration(milliseconds: 300),
                      curve: Curves.linear);
                },
                child: Icon(Icons.arrow_back),
              ),
              FloatingActionButton(
                heroTag: 'btn2',
                onPressed: () {
                  controller.nextPage(
                      duration: Duration(milliseconds: 300),
                      curve: Curves.linear);
                },
                child: Icon(Icons.arrow_forward),
              ),
            ])
          ],
        ));
  }

  Widget buildIndicatorItem(Color color, int index) {
    return CircleAvatar(
      radius: 25,
      backgroundColor: color,
      child: Text(index.toString()),
    );
  }
}

产生以下结果：

如果有什么不清楚的地方，请告诉我。