Flutter界面元素隐藏插件uiblock的使用

插件介绍

uiblock 是一个用于Flutter应用程序中简单而有效的方法，以阻止或取消阻止用户界面(UI)的操作。它能够通过一行代码实现UI的阻塞与解封，从而在加载或处理期间阻止用户导航。此插件具有以下特点：

• 完全可定制
• 支持Android和iOS平台
• 使用简单方便
• 无其他依赖项
• 文档完善
• 已准备好投入生产环境

安装

Null-Safety 版本

dependencies:
  uiblock: ^2.0.1

非Null-Safety 版本

dependencies:
  uiblock: 1.2.0

快速开始

首先，在项目中添加uiblock依赖，并导入包：

import 'package:uiblock/uiblock.dart';

接下来，您可以按照以下方式使用uiblock来阻塞和解除阻塞UI：

阻塞UI

// 默认用法
UIBlock.block(context);

// 或者使用globalKey
UIBlock.block(_scaffoldGlobalKey.currentContext);

解除阻塞UI

// 解除阻塞后调用unblock以关闭遮罩层
UIBlock.unblock(context);

// 或者使用globalKey
UIBlock.unblock(_scaffoldGlobalKey.currentContext);

作为Widget使用

您还可以将uiblock作为一个widget来使用，以便更灵活地控制UI的状态。例如：

FlatButton(
    child: Text('Load Async'),
    onPressed: () {
        setState(() {
            showLoader = !showLoader;
        });
    },
),

Container(
    height: _height,
    child: UIBlock(
        loadingStateFromFuture: () async {
            if (showLoader) {
                // 返回null以阻塞UI
                return null;
            }
            // 当有数据时解除阻塞
            return Future.value(Random().nextInt(200));
        },
        barrierColor: Colors.blueGrey,
        barrierOpacity: 0.2,
        loadingTextWidget: Text('Loading data...'),
        hideBuilderOnNullData: true,
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
            return Center(child: Text('Async Data ${snapshot.data}'));
        },
    ),
);

自定义阻塞模式

您可以根据需要自定义阻塞模式，如显示文本、创建子构建器或设置模态转换等。

使用文本进行阻塞

UIBlock.block(
    _scaffoldGlobalKey.currentContext,
    canDissmissOnBack: true,
    loadingTextWidget: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
            'Press back to dissmiss',
            textAlign: TextAlign.center,
            style: TextStyle(
                color: Colors.white,
                fontSize: 18.0,
                fontWeight: FontWeight.w600,
            ),
        ),
    ),
);

使用子构建器创建

UIBlock.block(
    _scaffoldGlobalKey.currentContext,
    backgroundColor: Colors.green.withOpacity(0.5),
    imageFilter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    childBuilder: (BuildContext context) {
        // 返回您自己的小部件
    },
);

创建自定义模态转换（仅适用于静态UIBlock.block）

UIBlock.block(
    customBuildBlockModalTransitions:
        (context, animation, secondaryAnimation, child) {
        return RotationTransition(
            turns: animation,
            child: child,
        );
    },
);

带有数据返回的用法

如果您希望在解除阻塞时返回某些数据，可以这样做：

var result = await UIBlock.blockWithData(
    _scaffoldGlobalKey.currentContext,
    loadingTextWidget: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlatButton(
            onPressed: () {
                UIBlock.unblockWithData(context, "hello world");
            },
            child: Text(
                'Press here to dissmiss with data. Back for null',
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontWeight: FontWeight.w600,
                ),
            ),
        ),
    ),
);

print(result);

更多详细信息请参阅官方示例。

属性列表

小部件属性

提升与反馈

如果您发现了任何问题或有新的想法，欢迎提交issue或者PR到GitHub仓库。此外，请不要忘记给这个优秀的插件点个赞哦！

以上就是关于uiblock插件的基本介绍及使用方法，希望对您有所帮助！如果还有其他疑问，欢迎随时提问。