Flutter输入阻止插件block_input的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter输入阻止插件block_input的使用

插件简介

block_input 是一个用于 Flutter 的简单字符阻止输入插件，通常用于兑换码或验证码的输入场景。

功能特点

  • 支持数字和文本输入。
  • 提供自定义键盘样式。
  • 支持蒙古文西里尔字母输入。
  • 可以轻松集成到现有项目中。

使用方法

以下是如何在 Flutter 项目中使用 block_input 插件的详细步骤和示例代码。

示例代码

以下是完整的示例代码，展示了如何使用 block_input 插件。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:block_input/block_input.dart';
import 'package:block_input/block_input_controller.dart';
import 'package:block_input/block_input_keyboard_type.dart';
import 'package:block_input/block_input_style.dart';
import 'package:block_input/block_keyboard_style.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个 BlockInputController 来管理输入框内容
  BlockInputController blockInputController = BlockInputController(6);

  // 创建控制器用于处理蒙古文西里尔字母输入
  BlockInputController cyrillicInputController = BlockInputController(2);
  TextEditingController numberInputController = TextEditingController();

  @override
  void initState() {
    // 添加监听器以打印输入内容
    blockInputController.addListener(() {
      print(blockInputController.text);
    });
    super.initState();
  }

  @override
  void dispose() {
    // 释放资源
    blockInputController.dispose();
    cyrillicInputController.dispose();
    numberInputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 点击空白处隐藏键盘
        FocusScope.of(context).unfocus();
      },
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Block Input 示例'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                // 数字输入框
                Container(
                  padding: EdgeInsets.all(10),
                  child: BlockInput(
                    controller: blockInputController,
                    keyboardType: BlockInputKeyboardType.number,
                    axisAlignment: MainAxisAlignment.spaceBetween,
                    style: BlockInputStyle(
                      backgroundColor: Colors.black12,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        borderSide: BorderSide(color: Colors.deepOrange, width: 1),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        borderSide: BorderSide(color: Colors.blueAccent, width: 2),
                      ),
                    ),
                  ),
                ),
                // 按钮操作区域
                Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      RaisedButton(
                        child: Text('清除'),
                        onPressed: () {
                          blockInputController.clear();
                        },
                      ),
                      SizedBox(width: 10),
                      RaisedButton(
                        child: Text('随机填充'),
                        onPressed: () {
                          Random rand = Random();
                          StringBuffer strBuffer = StringBuffer();
                          for (int i = 0; i < blockInputController.size; i++) {
                            strBuffer.write(rand.nextInt(9).toString());
                          }
                          blockInputController.text = strBuffer.toString();
                        },
                      ),
                      SizedBox(width: 10),
                      RaisedButton(
                        child: Text('测试'),
                        onPressed: () {
                          blockInputController.text = 'MARAAAAA';
                        },
                      ),
                    ],
                  ),
                ),
                // 蒙古文注册号输入示例
                Divider(),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      // 第一部分：蒙古文西里尔字母输入
                      Container(
                        width: 90,
                        child: BlockInput(
                          controller: cyrillicInputController,
                          keyboardType: BlockInputKeyboardType.mnCyrillic,
                          axisAlignment: MainAxisAlignment.spaceBetween,
                          style: BlockInputStyle(
                            keyboardStyle: BlockKeyboardStyle(
                              keyColor: Colors.blueAccent,
                              backgroundColor: Colors.white,
                              width: 40,
                              height: 40,
                              textStyle: TextStyle(),
                              keyShape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(18.0),
                                side: BorderSide(color: Colors.red),
                              ),
                            ),
                            backgroundColor: Colors.white,
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(7)),
                              borderSide: BorderSide(color: Colors.blueGrey, width: 1),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(7)),
                              borderSide: BorderSide(color: Colors.blue, width: 3),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(width: 10),
                      // 第二部分：数字输入
                      Container(
                        child: Expanded(
                          child: TextField(
                            controller: numberInputController,
                            keyboardType: TextInputType.number,
                            decoration: InputDecoration(
                              contentPadding:
                                  EdgeInsets.symmetric(vertical: 0, horizontal: 5),
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.all(Radius.circular(7)),
                                borderSide: BorderSide(color: Colors.blueGrey, width: 1),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.all(Radius.circular(7)),
                                borderSide: BorderSide(color: Colors.blue, width: 3),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                // 获取注册号按钮
                Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      RaisedButton(
                        child: Text('获取注册号'),
                        onPressed: () {
                          print(cyrillicInputController.text +
                              numberInputController.text);
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

功能说明

1. 数字输入框

BlockInput(
  controller: blockInputController,
  keyboardType: BlockInputKeyboardType.number,
  axisAlignment: MainAxisAlignment.spaceBetween,
  style: BlockInputStyle(
    backgroundColor: Colors.black12,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      borderSide: BorderSide(color: Colors.deepOrange, width: 1),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      borderSide: BorderSide(color: Colors.blueAccent, width: 2),
    ),
  ),
),
  • controller: 用于管理输入框内容。
  • keyboardType: 设置输入类型为数字。
  • axisAlignment: 控制子控件的对齐方式。
  • style: 自定义输入框的样式。

2. 蒙古文输入框

BlockInput(
  controller: cyrillicInputController,
  keyboardType: BlockInputKeyboardType.mnCyrillic,
  style: BlockInputStyle(
    keyboardStyle: BlockKeyboardStyle(
      keyColor: Colors.blueAccent,
      backgroundColor: Colors.white,
      width: 40,
      height: 40,
      textStyle: TextStyle(),
      keyShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red),
      ),
    ),
    backgroundColor: Colors.white,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(7)),
      borderSide: BorderSide(color: Colors.blueGrey, width: 1),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(7)),
      borderSide: BorderSide(color: Colors.blue, width: 3),
    ),
  ),
),
  • keyboardType: 设置输入类型为蒙古文西里尔字母。
  • keyboardStyle: 自定义虚拟键盘样式。

3. 控制器和监听器

// 初始化控制器
BlockInputController blockInputController = BlockInputController(6);

// 添加监听器
blockInputController.addListener(() {
  print(blockInputController.text);
});

// 获取和设置值
String getValue = blockInputController.text;
blockInputController.text = 'maaraa';

// 清空输入框
blockInputController.clear();

// 释放资源
blockInputController.dispose();

更多关于Flutter输入阻止插件block_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter输入阻止插件block_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


block_input 是一个用于在 Flutter 应用程序中阻止用户输入的插件。它可以在某些场景下非常有用，例如当应用程序正在执行某些关键操作时，防止用户进行不必要的输入。

以下是如何在 Flutter 中使用 block_input 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 block_input 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  block_input: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在需要使用 block_input 的 Dart 文件中导入插件：

import 'package:block_input/block_input.dart';

3. 使用 block_input

block_input 插件提供了 BlockInput 类，你可以使用它来阻止或允许用户输入。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Block Input Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  // 阻止用户输入
                  BlockInput.block();
                  print('Input blocked');
                },
                child: Text('Block Input'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 允许用户输入
                  BlockInput.unblock();
                  print('Input unblocked');
                },
                child: Text('Unblock Input'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 运行应用程序

运行你的 Flutter 应用程序，点击 “Block Input” 按钮将阻止用户输入，点击 “Unblock Input” 按钮将允许用户输入。

注意事项

  • block_input 插件通常用于阻止全局的输入事件，因此在使用时要小心，确保在适当的时候解除输入阻止。
  • 在某些平台上，可能需要额外的权限或配置来完全阻止用户输入。

示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:block_input/block_input.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Block Input Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  BlockInput.block();
                  print('Input blocked');
                },
                child: Text('Block Input'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  BlockInput.unblock();
                  print('Input unblocked');
                },
                child: Text('Unblock Input'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！