将 LinearProgressIndicator 的方向更改为垂直

Question

有没有办法可以将 LinearProgressIndicator 的方向从水平更改为垂直？

我可以这样改变它的大小：

Container(
  height: 1000,
  width: 24,
  child: LinearProgressIndicator(
    value: 0.8,
  ),
),

但进度仍然是从右到左。我可以以某种方式从上到下改变它吗？

Answer 1

虽然LinearProgressIndicator不直接支持这一点，但您可以轻松地将其包裹起来RotatedBox以顺时针 (1) 或逆时针 (-1) 旋转 90 度，例如：

RotatedBox(
  quarterTurns: -1,
  child: LinearProgressIndicator(),
)

您可以像往常一样进一步自定义它，当然高度会变成宽度等等，示例结果：

上述示例的完整源代码：

Padding(
  padding: EdgeInsets.all(80),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      RotatedBox(
        quarterTurns: -1,
        child: LinearProgressIndicator(
          value: 0.12,
        ),
      ),
      RotatedBox(
        quarterTurns: -1,
        child: LinearProgressIndicator(
          value: 0.42,
          valueColor: AlwaysStoppedAnimation(Colors.orange),
          backgroundColor: Colors.blue,
        ),
      ),
      RotatedBox(
        quarterTurns: 1,
        child: LinearProgressIndicator(
          minHeight: 20,
          value: 0.89,
          valueColor: AlwaysStoppedAnimation(Colors.purple),
          backgroundColor: Colors.lime,
        ),
      ),
    ],
  ),
)