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,
          ))

    ],
  )

这是压缩方法

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

Answer 1

看起来您在bool loader_saver=false;方法中将build作为局部变量。它应该是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)

有状态的窗口小部件将仅针对state变量更改进行重建。不适用于局部/全局变量更改。

Answer 2

我得到了答案...感谢大家的答复。这是解决方案。

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

Answer 3

您是否可以验证或更改AppBar或CircularProgressIndicator的颜色，我记得它们具有与蓝色相同的默认颜色。

请先进行其他验证，然后再进行验证。

Answer 4

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

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

Answer 5

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

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

但是，即使更改颜色，也很难在appBar中放置CircularProgressIndicator，因为该栏将要拉伸其中的内容。参见this issue。这就是我使它看起来像一个操作按钮并遵循正确的主题的方式：

 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: //...,
     ),

颤振循环进度指示器未显示在应用栏中

5 个答案: