flutter - 将 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,
        ),
      ),
    ],
  ),
)