Flutter：如何动态创建水平时间轴小部件

Question

我正在使用Flutter创建4个页面（表单），每个页面底部都有下一步和上一步按钮。然后根据当前所在的页面，我想要在每个页面顶部显示附加的图片。

该图片展示了用户正在第3页，前两页已经完成。

如何创建这样的效果？

感谢您的帮助。

- user2570135

Answer 1

在我看来，并没有现成的包可以做到这一点。你必须编写自己的类来实现，而且相当容易。下面是示例代码，完整代码在此。

只需调用下面的类作为ScreenProgress(ticks:2)，它将返回与您问题中的图像类似的内容。

注意：请将以下代码用作示例（而不是最终实现）。

class ScreenProgress extends StatelessWidget {

  final int ticks;

  ScreenProgress({@required this.ticks});


  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        tick1(),
        spacer(),
        line(),
        spacer(),
        tick2(),
        spacer(),
        line(),
        spacer(),
        tick3(),
        spacer(),
        line(),
        spacer(),
        tick4(),
      ],
    );


  }

  Widget tick(bool isChecked){
    return isChecked?Icon(Icons.check_circle,color: Colors.blue,):Icon(Icons.radio_button_unchecked, color: Colors.blue,);
  }

  Widget tick1() {
    return this.ticks>0?tick(true):tick(false);
  }
  Widget tick2() {
    return this.ticks>1?tick(true):tick(false);
  }
  Widget tick3() {
    return this.ticks>2?tick(true):tick(false);
  }
  Widget tick4() {
    return this.ticks>3?tick(true):tick(false);
  }

  Widget spacer() {
    return Container(
      width: 5.0,
    );
  }

  Widget line() {
    return Container(
      color: Colors.blue,
      height: 5.0,
      width: 50.0,
    );
  }
}

- Sukhi

Answer 2

在 pub.dev 上有一些你想要的包，你可以尝试这两个包：

1. https://pub.dev/packages/timelines
2. https://pub.dev/packages/timeline_tile

- milano zz

---

虽然此链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。-【来自审核】 - MangoNrFive