flutter - 使用切换按钮时显示微调器

Question

我正在使用这个包来创建一个切换按钮。当开关以任一方式切换时，会弹出一个对话框，当有人在弹出的对话框上按确定时，一些数据会保存在数据库中，然后开关翻转。以下代码存在此问题。

1. 切换开关按钮时，在将值保存到 DB 之前，开关不会翻转。这会给用户造成一种错觉，即可能切换不起作用。我该如何处理这种情况，以便用户看到加载微调器来通知他们正在处理他们请求的更改？

这是代码：

SwitcherButton(
                  key: UniqueKey(),
                  value: isSwitchOn,
                  onColor: Colors.greenAccent,
                  offColor: Colors.grey,
                  onChange: (value) {
                    print(value);
                    AwesomeDialog(
                      context: context,
                      dialogType: DialogType.QUESTION,
                      animType: AnimType.TOPSLIDE,
                      title: isSwitchOn
                          ? 'Mark item as unavailable ?'
                          : 'Mark item as available?',
                      desc: '',
                      btnCancelOnPress: () {
                        setState(() {
                          // isSwitchOn=!value;
                          print(
                              'Value after cancel is ' + isSwitchOn.toString());
                        });
                      },
                      btnOkText: "Yes",
                      btnCancelText: "No",
                      btnOkOnPress: () {
                        setState(() {
                          isSwitchOn = !isSwitchOn;
                          updateProductAvailability(isSwitchOn);
                        });
                      },
                    )..show();
                  },
                ),

 updateProductAvailability(bool isSwitchOn) async {
    await Provider.of<Products>(context, listen: false)
        .updateProductAvailability(widget.id, isSwitchOn)
        .then((value) => Scaffold.of(context).showSnackBar(
              SnackBar(
                content: isSwitchOn
                    ? Text('Product marked as available')
                    : Text('Product marked as unavailable'),
                duration: Duration(seconds: 2),
              ),
            )).catchError((Object error){
                Scaffold.of(context).showSnackBar(
              SnackBar(
                content:Text('Something went wrong. Please try again later.'),
                duration: Duration(seconds: 2),
              ),
            );
            });
  }

根据尼克的回复更新了答案。

_isLoading?CircularProgressIndicator():SwitcherButton(
                  key: UniqueKey(),
                  value: isSwitchOn,
                  onColor: Colors.greenAccent,
                  offColor: Colors.grey,
                  onChange: (value) {
                    value=!value;
                    AwesomeDialog(
                      context: context,
                      dialogType: DialogType.QUESTION,
                      animType: AnimType.TOPSLIDE,
                      title: isSwitchOn
                          ? 'Mark item as unavailable ?'
                          : 'Mark item as available?',
                      desc: '',
                      btnCancelOnPress: () {
                        setState(() {
                          // isSwitchOn=!value;
                          print(
                              'Value after cancel is ' + isSwitchOn.toString());
                        });
                      },
                      btnOkText: "Yes",
                      btnCancelText: "No",
                      btnOkOnPress: () {
                        setState(() {
                          isSwitchOn = !isSwitchOn;
                          //print('isswitchon value is ' + isSwitchOn.toString());
                         updateProductAvailability(isSwitchOn);
                        });
                      },
                    )..show();
                  },
                ),

 updateProductAvailability(bool isSwitchOn) async {
     setState((){
      _isLoading = true;
    });
    
    await Provider.of<Products>(context, listen: false)
        .updateProductAvailability(widget.id, isSwitchOn)
        .then((value) {
              
              // <---------------------------
              setState((){
                _isLoading = false;
              });

              Scaffold.of(context).showSnackBar(
              SnackBar(
                content: isSwitchOn
                    ? Text('Product marked as available')
                    : Text('Product marked as unavailable'),
                duration: Duration(seconds: 2),
              ),
            );}).catchError((Object error){

              // <---------------------------
              setState((){
                _isLoading = false;
              });

                Scaffold.of(context).showSnackBar(
              SnackBar(
                content:Text('Something went wrong. Please try again later.'),
                duration: Duration(seconds: 2),
              ),
            );
            });
  }

标签： flutterdart

Answer 1

未来需要一些时间才能完成。
使用变量来isLoading维护加载逻辑会有所帮助。下面是例子。

在 State Class 中定义一个变量 isLoading。

bool isLoading = false;

现在在您的小部件树中根据需要使用它。

isLoading ? AnySpinnerWidget() : ShowAlternativeWidget()

setState根据并调用更新 UI 将其标记为 true 和 false 。

updateProductAvailability(bool isSwitchOn) async {

    // <---------------------------
    setState((){
      isLoading = true;
    });
    
    await Provider.of<Products>(context, listen: false)
        .updateProductAvailability(widget.id, isSwitchOn)
        .then((value) {
              
              // <---------------------------
              setState((){
                isLoading = false;
              });

              Scaffold.of(context).showSnackBar(
              SnackBar(
                content: isSwitchOn
                    ? Text('Product marked as available')
                    : Text('Product marked as unavailable'),
                duration: Duration(seconds: 2),
              ),
            )}).catchError((Object error){

              // <---------------------------
              setState((){
                isLoading = false;
              });

                Scaffold.of(context).showSnackBar(
              SnackBar(
                content:Text('Something went wrong. Please try again later.'),
                duration: Duration(seconds: 2),
              ),
            );
            });
}