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

Question

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

该图像显示用户位于第3页上，并且前2页已完成

如何创建它。 ？

感谢您的帮助

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