如何將 CircularProgressIndicator 放在 Flutter 中的另一個 CircularProgressIndicator 中？

Question

我嘗試這樣做，但結果是一個接一個。 CircularProgressIndicator堆疊，而不是像我在以下代碼中嘗試的那樣在里面：

body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 200,
              width: 200,
              child: Column(
                children: <Widget>[
                  CircularProgressIndicator(
                backgroundColor: Colors.pinkAccent,
                strokeWidth: 30.0,
                value: 0.7,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
              ),
                  SizedBox(
                    height: 150,
                    width: 150,
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.red,
                      strokeWidth: 10.0,
                      value: 0.7,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
                    ),
                  ),
              ],
            ),
            ),
          ],
        ),
      ),

Answer 1

您必須使用 Stack 小部件將這些小部件堆疊在一起

Stack(
    children: <Widget>[
      SizedBox(
        height: 200,
        width: 200,
        child: CircularProgressIndicator(
          backgroundColor: Colors.pinkAccent,
          strokeWidth: 30.0,
          value: 0.7,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
        ),
      ),
      Positioned(
        left: 25,
        top: 25,
        child: SizedBox(
          height: 150,
          width: 150,
          child: CircularProgressIndicator(
            backgroundColor: Colors.red,
            strokeWidth: 10.0,
            value: 0.7,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
          ),
        ),
      )
    ],
  ),

輸出