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

Question

我正在 Flutter 中创建 4 个页面（表单），表单底部有 next 和 prev 按钮。然后根据活动页面，我想向用户显示每个页面顶部的图像

图像显示用户在第 3 页并且完成了前 2 页

我怎样才能创建这个。?

谢谢你的帮助

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