Flutter进度指示器大小

Question

我想知道是否有办法改变线性和圆形进度条的宽度/长度/高度。我正在尝试使用它制作一个经验条，但不确定是否可能。另外，我知道这些值仅在0.0和1.0之间，但我认为（不确定）我能够创建一个公式，使其仍然有效。

- aj580

---

你能放上你的代码吗？你需要改变线性/圆形进度指示器父级的约束条件，你可以改变高度、宽度，值从0.0到1.0。 - diegoveloper

Answer 1

进度指示器将填充其父布局小部件，例如。

SizedBox(
    height: 300.0,
    width: 300.0,
    child: 
        CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation(Colors.blue),
        strokeWidth: 5.0)
    )

- F-1

---

SizedBox不会约束CircularProgressIndicator的形状，在Flutter中似乎是一个错误。然而，将它们全部包裹在“Center(child:)”中可以解决这个问题。 - user48956

这是我在生产中使用的代码，如果现在不起作用，那么最新版本的Flutter可能发生了一些变化。希望这只是一个错误，你正在使用哪个构建通道？（稳定版、测试版、开发版、主线版？） - F-1

看看我的回答：https://dev59.com/9lQK5IYBdhLWcg3wbPL7#60049283。 SizeBox的效果似乎取决于它所包含的内容（例如，如果包含在Center中，则按预期工作，但在Stack中则不是）。 我已提交错误报告：https://github.com/flutter/flutter/issues/50075。 - user48956

一个SizedBox被其父级限制（强制大小），并且不会放松这些限制（Center将放松限制）。如果在屏幕宽度处的约束是“紧密的”（不允许大小变化）（例如在垂直滚动ListView内部），则SizedBox宽度参数将被忽略。将SizedBox包装在中心中，因为中心填充最大可能的空间，然后放松其子项的约束，允许子项采用任何大小。 https://flutter.dev/docs/development/ui/layout/constraints部分“紧约束与松约束”解释了这一点。 - Baker

Answer 2

1. 这段代码表明它是一个Widget数组，如果你将其定义为数组，是因为你可以添加更多的widget。
2. 这是居中的
3. 并且这是一个CircularProgressIndicator（圆形进度条）。

通过这种方式，Circular Progress Indicator不会占据包含它的父容器的宽度和高度。

祝好！

<Widget>[Center(child: CircularProgressIndicator())]

- ijann

Answer 3

我该如何将创建加载指示器的类与我的按钮结合起来，以便在按下按钮时，指示器打开并翻转到下一页？

以下是代码：

class Loader extends StatefulWidget {
      @override
      State createState() => LoaderState();
    }

    class LoaderState extends State<Loader> with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<double> animation;

      @override
      void initState() {
        super.initState();
        controller = AnimationController(
            duration: Duration(milliseconds: 1200), vsync: this);
        animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut);
        animation.addListener(() {
          this.setState(() {});
        });
        animation.addStatusListener((AnimationStatus status) {});
        controller.repeat();
      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 3.0,
              width: animation.value * 100.0,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 5.0),
            ),
            Container(
              color: Colors.blue[300],
              height: 3.0,
              width: animation.value * 75.0,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 5.0),
            ),
            Container(
              color: Colors.blue,
              height: 3.0,
              width: animation.value * 50.0,
            )
          ],
        );
      }
    }


    Expanded(
                        child: Padding(
                          padding:
                              EdgeInsets.only(left: 20.0, right: 5.0, top:20.0),
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => FirstScreen()));
                            },
                            child: Container(
                                alignment: Alignment.center,
                                height: 45.0,
                                decoration: BoxDecoration(
                                    color: Color(0xFF1976D2),
                                    borderRadius: BorderRadius.circular(9.0)),
                                child: Text('Login',
                                    style: TextStyle(
                                        fontSize: 20.0, color: Colors.white))),
                          ),
                        ),
                      ),

- Max

---

我该如何将创建加载指示器的类与我的按钮组合，以便在按下按钮时，指示器打开并翻转到下一页？ - Max

请在您的答案中添加解释。 - Xcoder

点击登录按钮后，加载指示器应该出现3秒钟，然后跳转到下一个页面。 - Max