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

【问题标题】：Flutter: how to dynamically create a horizontal timeline widgetFlutter：如何动态创建水平时间线小部件
【发布时间】：2019-12-12 09:21:12
【问题描述】：

我正在颤振中创建 4 个页面（表单），表单底部有下一个和上一个按钮。然后根据活动页面，我想向用户展示附加在每个页面顶部的图像

图像显示用户在第 3 页，前 2 页已完成

我怎样才能创建这个。 ?

感谢您的帮助

【问题讨论】：

标签： flutter

【解决方案1】：

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

只需将下面的类称为 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,
    );
  }
}

【讨论】：