android - 如何将 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),
          ),
        ),
      )
    ],
  ),

输出