flutter 我如何创建一个进度条容器，它根据我的数据填充？

ecbunoof 于 2022-12-19 发布在 Flutter

关注(0)|答案(1)|浏览(115)

我需要构建一个小部件，如下所示：

作为一个有点新的Flutter，我画了一个空白，就如何实现背景被填补这样。
我的数据是这样的：

enum ProgressKeys {
  articles,
  meals,
  bloodPressure,
  mood,
  physicalActivity,
  weight,
}

class StepProgress {
  StepProgress({
    required this.displayText,
    required this.progress,
    required this.count,
  });

  final String displayText;
  final int progress;
  int count;
}

final Map<ProgressKeys, StepProgress> programStepCounts = {
  ProgressKeys.articles: {
    displayText: "Articles Read",
    progress: 2,
    count: 4,
  },
  ProgressKeys.meals: {
    displayText: "Meals Logged",
    progress: 3,
    count: 9,
  },
  // Etc...
}

我所能想到的是从ListView.builder开始，但我不知道如何在后台实现这样的东西。

flutter

来源：https://stackoverflow.com/questions/74816778/how-do-i-create-a-progress-bar-container-that-fills-based-on-my-data

1条答案

按热度按时间

798qvoo81#

您可以在Stack中使用LinearProgressIndicator！以下是代码示例：

return Center(
  child: Container(
    clipBehavior: Clip.hardEdge,
    margin: const EdgeInsets.symmetric(horizontal: 20.0),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
    ),
    height: 80.0,
    width: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: [
        Positioned.fill(
          child: LinearProgressIndicator(
            //Here you pass the percentage
            value: 0.7,
            color: Colors.blue.withAlpha(100),
            backgroundColor: Colors.blue.withAlpha(50),
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          child: Text('Hello world'),
        )
      ],
    ),
  ),
);

你可以给LinearProgressIndicator传递一个0到1之间的值，表示完成的百分比。在代码示例中，我使用了0.7，所以它的70%已满。它看起来像这样：

当然你可以改变颜色，在第一个容器中你可以调整边框。

赞(0）回复(0）举报 2022-12-19

我来回答

flutter 我如何创建一个进度条容器，它根据我的数据填充？

1条答案

相关问题

热门标签

最新问答