Flutter：如何创建百分比跟踪器

Posted 2023-02-24

【中文标题】Flutter：如何创建百分比跟踪器

【英文标题】：Flutter : how to create a percent tracker

【发布时间】：2019-08-24 00:35:58

【问题描述】：

我在一个表单上有 10 个字段，我想要一个类似于下图的状态跟踪器..

基本上，我会传递百分比并且应该更新小部件

所以如果完成了 4 个项目，那么它将完成 40%，， 你能给我一些关于如何创建这个小部件的提示

【问题讨论】：

关注我的回答：***.com/questions/57534160/…

您好，您的问题找到答案了吗？

【参考方案1】：

我认为这有点奇怪，但可能会有所帮助！

你需要一个验证器

您可以创建一个名为checkProgress() 的函数并将其分配给textformfield 的onChanged：

void checkProgress() 
   if(textformfieldcontroller.isValid) 
      setstate(() 
         progressbar = progressbar + 10;
      );
    else if (textformfieldcontroller.isNotValid) 
      setstate(() );
   

它可能有效，但如果不是这个概念是使用带有 setstate 的 if 语句。

【参考方案2】：

您可以使用库 percent_indicator

 LinearPercentIndicator(animation: true,
 lineHeight: 15,
 animationDuration: 5000,
 percent: 0.4,
 backgroundColor: Colors.blue,
 progressColor: Colors.orange,
 center: Text(
  'Text',
  style: TextStyle(
  color: Theme.of(context).primaryColorDark,
  fontSize: 15,
  fontWeight: FontWeight.w500),
),
linearStrokeCap: LinearStrokeCap.roundAll,
),

参数“百分比”在指标中显示进度

【讨论】：

请在您的答案中添加一些解释/示例