如何使用 Flutter 創建多色進度條

Question

如何在 Flutter 中創建多色進度條。 我閱讀了有關 LinearProgressIndicator 的信息，但我不確定它是否足夠。

我想做這樣的事情。

請指導我使用什么小部件。 我不想要完整的代碼。

Answer 1

您必須逐個組裝它。 我在您顯示的進度欄中看到五個部分：

1. 具有陰影/深度效果、彎曲角的灰色矩形
2. 帶有白色文本的綠色矩形（閱讀：帶邊框的容器）
3. 帶有白色文本的琥珀色矩形
4. 帶有白色文本的紅色矩形
5. 所有矩形都是水平的（閱讀：行）

隨着您的活動進行，這些數字會發生變化。 現在，這可以通過 setState() 來實現。 所以，讓我們不要擔心。 :)

好的，就目前而言，您需要准備一個 class ，它采用一個參數，即progressPercentage 。 根據百分比，您可以決定顯示多少塊以及使用什么文本。 這個簡單的代碼片段繪制了帶有一些文本的綠色矩形。 這個codepen顯示了多色條，它可能很容易轉換成進度條。