Flutter圆形进度指示器在应用栏中不显示

Question

我正在创建一个项目，需要在应用栏中显示进度条。以下是代码：

bool loader_saver=false;
return Scaffold(
  appBar: new AppBar(
    title: new Text("add data"),
    actions: <Widget>[
      loader_saver?
          new CircularProgressIndicator()
      :
      new FlatButton(
          onPressed: () {
            _add_Data();
          },
          child: new Icon(
            Icons.save,
            color: Colors.white,
          ))

    ],
  )

这是onPressed方法

void _add_data(){ 
final _formstate = _form_key.currentState;
if (_formstate.validate()) {
  _form_key.currentState.save();
  setState(() {
    loader_saver=true;
  });
  }
}

- Sourav Das

---

你尝试过 https://flutter.io/debugging/#visual-debugging 吗？ - Günter Zöchbauer

还没有，但您能提供一些代码吗？ - Sourav Das

Answer 1

这将在应用程序栏中显示您的"CircularProgressIndicator"，根据您的要求进行更改。

actions: <Widget>[
new Container(width: 60.0, height: 20.0, color: Colors.lightGreen,
child: new CircularProgressIndicator(),)]

- Zulfiqar

---

谢谢，这就是正确的答案。能否告诉我如何更改循环进度指示器的颜色？ - Sourav Das

Answer 2

旧帖，但对于任何现在阅读的人：

我猜它没有显示出来是因为在默认材料主题中appBar背景颜色与圆形进度指示器的颜色完全相同。

但即使你改变颜色，在appBar中放置一个CircularProgressIndicator也很难，因为该栏将想要拉伸其中的内容。请参见此问题。这是我让它看起来就像一个操作按钮并遵循正确的主题风格的方法：

 class ProgressRefreshAction extends StatelessWidget {
   final bool isLoading;
   final Function() onPressed;

   ProgressRefreshAction({
     this.isLoading,
     this.onPressed,
   });
   @override
   Widget build(BuildContext context) {
     if (isLoading) {
       final theme = Theme.of(context);
       final iconTheme =
           theme.appBarTheme.actionsIconTheme ?? theme.primaryIconTheme;
       return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
         Padding(
           padding: const EdgeInsets.only(right: 12),
           child: Container(
             width: iconTheme.size ?? 24,
             height: iconTheme.size ?? 24,
             child: CircularProgressIndicator(
               valueColor: AlwaysStoppedAnimation<Color>(iconTheme.color),
             ),
           ),
         ),
       ]);
     }
     return IconButton(
       icon: Icon(
         Icons.refresh,
       ),
       onPressed: onPressed,
     );
   }
 }

 //build(context) {
 return Scaffold(
     appBar: AppBar(
       title: Text("MyApp"),
       actions: [
         ProgressRefreshAction(_isLoading),
       ],
       body: //...,
     ),

- QuinnFreedman

---

感谢解决了我在应用栏中设置CircularProgressIndicator大小的问题。 - Mr. ZeroOne

不错。顺便说一下，如果你在Container上用margin: const EdgeInsets.only(right: 12)代替Padding，就可以将层次结构缩小一个级别。 - qix

Answer 3

我已经得到答案了，谢谢你们所有人的回应。以下是解决方案。

new Theme(
    data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: new CircularProgressIndicator(),
);

- Sourav Das

Answer 4

看起来你在build方法中将bool loader_saver=false;作为局部变量。它应该是一个state变量。

由于你正在调用setState，所以你需要将上述代码放在StatefulWidget内。

class MyAppState extends State<MyApp> {
 bool loader_saver=false; // add this line (state variable)

 @override
 Widget build(BuildContext context) {
 // bool loader_saver=false; remove this line (local variable)

有状态的部件只会因为状态变量的改变而进行重建，而不是因为局部/全局变量的改变。

- Dinesh Balasubramanian

---

nop..我在widget build方法外声明了它..这不是确切的答案。 - Sourav Das

控制是否进入了 if (_formstate.validate()) {？如果是，请提供更多的代码。 - Dinesh Balasubramanian

Answer 5

你能确认或修改 AppBar 或者 CircularProgressIndicator 的颜色吗？我记得它们默认的颜色都是蓝色。

在进行其他操作之前，请确保验证一下。

- Argel Bejarano