Question

我正在尝试在登录时显示进度指示器。我创建了一个布尔值以在要显示和隐藏指示器时进行切换，但是我无法弄清楚应该在哪里显示指示器。

我可以将其添加为我在其中显示所有其他屏幕小部件的容器中的小部件之一，但是我不希望它干扰其他小部件，而是显示在所有小部件之上。我该如何实现？我该如何实现？

谢谢。

我的代码

import ....

class Login extends StatefulWidget{
...
}

class _LoginState extends State<Login> {

bool _loading = false;

  @override
  Widget build(BuildContext context){

    Future<Map<String, dynamic>> getData() async {
      var client = http.Client();

      //to SHOW Indicator
      setState(() {
        _loading = true;
      });

      var response = await client
          .post(
          Uri.encodeFull(
              ' api url '),
          body:
        {"email":"$username","password":"$password"}

      ).whenComplete(
          client.close);

      var res = json.decode(response.body);

      //to HIDE indicator
      setState(() {
        _loading = false;
      });

      if(response.statusCode <200 || response.statusCode > 400){
        print("Error");
         throwError();
      }
      if(response.statusCode == 200 ){
        widget.onSignedIn();
      }

      if (!mounted)
        return {'success': false};

      return json.decode(response.body);
    }


    Container view = Container(
      ....
    );

    return Scaffold(
        resizeToAvoidBottomPadding: false,
      body: view

    );
  }
}

Answer 1

如CopsOnRoad所述，如果要放置多个彼此不干扰的Stack，则必须使用Widget。

Dart 2.3还引入了 collect if 。有了它，您只有在条件为Collection时才能将项目添加到true。

Stack(
  alignment: Alignment.center,
  children: [
    Container(child: ...),
    if (_loading) CircularProgressIndicator(),
  ],
)

Answer 2

您可以使用此功能显示对话框

  void _onLoading() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => Dialog(
              child: Container(
            height: 100,
            child: Center(child: new CircularProgressIndicator()),
          )),
    );
  }

，当您要弹出它时，只需致电

 Navigator.pop(context);

Answer 3

您可以在library中使用import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; import 'package:hello_world/screens/favourite_word_page.dart'; import 'dart:developer'; import 'package:hello_world/screens/popular_page.dart'; class HomePage extends StatefulWidget { @override State<StatefulWidget> createState() => _RandomWordsState(); } enum PAGE_INDEX { HOME, POPULAR, ACCOUNT } class _RandomWordsState extends State<HomePage> { final GlobalKey<AnimatedListState> _listKey = GlobalKey(); final _suggestion = new List<WordPair>(); final _savedWords = new Set<WordPair>(); final _biggerFont = const TextStyle(fontSize: 18.0); int _selectedIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Getting Started Testing"), actions: <Widget>[ new IconButton( icon: const Icon(Icons.list), onPressed: _goToFavourite, ), new IconButton( icon: const Icon(Icons.add), onPressed: _addWords, ), ], ), body: CupertinoTabScaffold( tabBar: CupertinoTabBar( items: const <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("Home"), ), BottomNavigationBarItem( icon: Icon(Icons.whatshot), title: Text("Popular"), ), BottomNavigationBarItem( icon: Icon(Icons.account_circle), title: Text("Account"), ), ], currentIndex: _selectedIndex, ), tabBuilder: (BuildContext context, int index) { switch (index) { case 0: return CupertinoTabView( defaultTitle: "Home", builder: (context) => _buildSuggestion(), ); break; case 1: return CupertinoTabView( defaultTitle: "Popular", builder: (context) => PopularPage(), ); break; default: } }, ), ); } Widget _buildSuggestion() { //_suggestion.addAll(generateWordPairs().take(10)); print("suggestion list count : " + _suggestion.length.toString()); return Container( margin: const EdgeInsets.only(bottom: 45), child: AnimatedList( key: _listKey, padding: EdgeInsets.all(8.0), initialItemCount: _suggestion.length, itemBuilder: (BuildContext context, int itemIndex, Animation animation) { return _buildRow(_suggestion[itemIndex], animation, itemIndex); }, ), ); } Widget _buildRow(WordPair suggestion, Animation animation, [int index]) { print((index + 1).toString() + " suggestion name: " + suggestion.asPascalCase); final bool isAlreadySaved = _savedWords.contains(suggestion); return SlideTransition( position: Tween<Offset>( begin: new Offset(1, 0), end: new Offset(0, 0), ).animate(animation), child: Card( child: ListTile( title: new Text( suggestion.asPascalCase, style: _biggerFont, ), subtitle: Text((index + 1).toString()), trailing: new Icon( isAlreadySaved ? Icons.favorite : Icons.favorite_border, color: isAlreadySaved ? Colors.red : null, ), onTap: () => _saveAsFavourite(isAlreadySaved, suggestion), ), ), ); } void _saveAsFavourite(bool isAlreadySaved, WordPair suggestion) { setState(() { if (isAlreadySaved) { _savedWords.remove(suggestion); } else { _savedWords.add(suggestion); } }); } void _goToFavourite() { Navigator.of(context).push( MaterialPageRoute( builder: (context) => FavouriteWordsPage( favouriteWords: _savedWords, ), ), ); } void _addWords() { setState(() { _suggestion.addAll(generateWordPairs().take(10)); print("list count: " + _suggestion.length.toString()); for (var i = 0; i < 10; i++) { _listKey.currentState.insertItem(i); } }); } }并从here导入

显示对话框

xs_progress_hud: ^1.0.2

隐藏对话框

 XsProgressHud.show(context);

在这里您可以在代码中执行类似的操作。

 XsProgressHud.hide();

如何在颤动中显示进度指示器？

3 个答案: