Flutter笔记:Widgets Easier组件库-使用隐私守卫

Flutter笔记 Widgets Easier组件库:使用隐私守卫


组件库地址


【介绍】:本文介绍Flutter Widgets Easier组件库中隐私守卫及其用法。

目 录


  • [1. 概述](#1. 概述)
    • [1.1 关于Widgets Easier](#1.1 关于Widgets Easier)
    • [1.2 模块安装](#1.2 模块安装)
  • [2. 隐私守卫](#2. 隐私守卫)
  • [3. 问题报告和代码贡献](#3. 问题报告和代码贡献)

[1. 概述](#1. 概述)

[1.1 关于Widgets Easier](#1.1 关于Widgets Easier)

本库是一个 Flutter 组件库,旨在提供用于Flutter开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

[1.2 模块安装](#1.2 模块安装)

在你的Flutter项目中,运行下面的命令:

bash 复制代码
flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

[2. 隐私守卫](#2. 隐私守卫)

隐私保护组件PrivacyGuard 用于保护一些页面信息不被截屏和泄露。在一些场景下,我们需要对页面做一些保护处理。比如用户输入密码时,我系需要禁止截屏录屏,而用户离开页面时,也可能需要对页面实现一个模糊化的效果。这是比价常用的功能,但是对话禁止录屏等操作Flutter 没有直接的接口,每次都些通信实现这样一个简单组件比较麻烦。因此widgets Easier 针对于AndroidiOS 进行了封装,直接以单子部件的形式提供使用。PrivacyGuard部件的签名如下:

dart 复制代码
const PrivacyGuard({
  super.key,
  required this.child, // 被保护的子组件
  this.blurRadius = 10.0, // 模糊半径
  this.blurColor = const Color.fromARGB(136, 225, 225, 225), // 模糊颜色
  this.onEnterPrivacyMode, // 离开页面时的回调
  this.onExitPrivacyMode, // 回到页面时的回调
  this.preventScreenshot = false, // 是否禁止截屏
});

下面的代码展示了一个被PrivacyGuard所守卫的登录页面:

dart 复制代码
import 'package:flutter/material.dart';
import 'package:widgets_easier/widgets_easier.dart';

class GuardedPage extends StatelessWidget {
  const GuardedPage({super.key});

  @override
  Widget build(BuildContext context) {
    return PrivacyGuard(
      preventScreenshot: true,
      onEnterPrivacyMode: () => print('onEnterPrivacyMode'),
      onExitPrivacyMode: () => print('onExitPrivacyMode'),
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('登录页面'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    '守卫登录页',
                    style: TextStyle(
                      fontSize: 24.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 32.0),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: '账户',
                      border: OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(height: 16.0),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: '密码',
                      border: OutlineInputBorder(),
                    ),
                    obscureText: true,
                  ),
                  const SizedBox(height: 16.0),
                  ElevatedButton(
                    onPressed: () {
                      // 登录逻辑
                    },
                    child: const Text('登录'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

页面的大致效果如下:

[3. 问题报告和代码贡献](#3. 问题报告和代码贡献)

问题报告

您可以在该项目的 GitHub 页面上提供反馈或报告问题。如果您觉得这个库缺少某个功能,请创建一个功能请求。在提交前,请先检查是否已又类似问题。

代码贡献

请将此仓库Fock到您的账户中,修改后rebase再PR到dev分支。建议提交信息格式为:

复制代码
type(scope): info about commit.
相关推荐
ALLIN8 小时前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei8 小时前
Flutter 国际化
flutter
Dabei8 小时前
Flutter MQTT 通信文档
flutter
Dabei11 小时前
Flutter 中实现 TCP 通信
flutter
孤鸿玉11 小时前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter
前端 贾公子13 小时前
《Vuejs设计与实现》第 16 章(解析器) 上
vue.js·flutter·ios
tangweiguo030519871 天前
Flutter 数据存储的四种核心方式 · 从 SharedPreferences 到 SQLite:Flutter 数据持久化终极整理
flutter
0wioiw01 天前
Flutter基础(②④事件回调与交互处理)
flutter
肥肥呀呀呀1 天前
flutter配置Android gradle kts 8.0 的打包名称
android·flutter
吴Wu涛涛涛涛涛Tao1 天前
Flutter 实现「可拖拽评论面板 + 回复输入框 + @高亮」的完整方案
android·flutter·ios