Flutter动态单行文本输入插件dynamic_single_text_field的使用

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

Flutter动态单行文本输入插件dynamic_single_text_field的使用

特性

本包是一个动态单行文本字段，允许根据开发者的需要动态创建多个文本字段（类似于OTP/密码输入，但没有OTP/密码功能——仅提供UI）。 你可以创建一个SingleTextModel实例列表，每个实例代表一个单行文本字段。每个SingleTextModel可以通过设置预设字符、字段下方附加文本等值来定制。每个SingleTextModel接受一个输入字符。

开始使用

  • 最低Flutter SDK版本: 3.0.0
  • 测试版本:
    • Flutter SDK版本: 3.27.3
    • Dart版本: 3.6.1

使用方法

参数说明

参数名 描述
singleTextModelList 这个参数是单行文本模型的列表。重要提示：使用此模型将数据插入到动态单行文本：SingleTextModel({this.singleText = “”, this.topLabelText, this.bottomLabelText});
scrollPhysics 这个参数用于设置ListView的滚动物理属性。
scrollController 这个参数用于设置ListView的滚动控制器。
singleDynamicListHeight 这个参数用于设置动态ListView的高度，默认值为150。
singleTextHeight 这个参数用于设置单行文本的高度，默认值为70。
singleTextWidth 这个参数用于设置单行文本的宽度，默认值为70。
textFieldTextStyle 这个参数用于设置单行文本的样式。
singleHintText 这个参数用于设置单行文本的提示。
singleHintTextStyle 这个参数用于设置单行文本提示的样式。
inputBorder 这个参数用于设置单行文本的输入边框。
enableInputBorder 这个参数用于设置单行文本启用边框。
disableInputBorder 这个参数用于设置单行文本禁用边框。
focusedInputBorder 这个参数用于设置单行文本聚焦边框。
textInputType 这个参数用于设置单行文本的输入类型，默认值为文本。
cursorColor 这个参数用于设置单行文本的光标颜色，默认值为黑色。
isReadOnly 这个参数用于设置单行文本是否只读，默认值为false。
isObscureText 这个参数用于设置单行文本是否隐藏，默认值为false。
obscuringCharacter 这个参数用于设置隐藏字符，默认值为•。
singleTextFillColor 这个参数用于设置单行文本填充颜色。
onChangeSingleText 这个参数是一个回调函数，在输入时获取字符（实时）和单行文本的索引。
onSubmitSingleText 这个参数是一个回调函数，在按下键盘上的完成/返回按钮时获取字符。
onValidationBaseOnLength 这个参数是一个回调函数，基于长度验证字符。
showLabelsType 这个参数是一个枚举类，用于设置是否需要顶部或底部标签或两者，showBottomLabelType、showBothLabelsType、hideLabelsType默认值为hideLabelsType。
textStyleTopLabel 这个参数用于设置顶部标签文本样式。
textStyleBottomLabel 这个参数用于设置底部标签文本样式。
widgetLeftMargin 这个参数用于设置单行文本左侧间距，默认值为20。
topLabelMarginBottom 这个参数用于设置顶部标签文本底部间距，默认值为0。
bottomLabelMarginTop 这个参数用于设置底部标签文本顶部间距，默认值为0。

示例

import 'package:dynamic_single_text_field/dynamic_single_text_field.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Sample Project',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<SingleTextModel> singleTextModelList1 = [];
  final List<SingleTextModel> singleTextModelList2 = [];
  final List<SingleTextModel> singleTextModelList3 = [];

  [@override](/user/override)
  void initState() {
    // 初始化三个列表并添加SingleTextModel实例
    List.generate(7, (index) => singleTextModelList1.add(SingleTextModel(singleText: "")));
    List.generate(7, (index) => singleTextModelList2.add(SingleTextModel(singleText: "", topLabelText: "top label $index", bottomLabelText: "bottom label $index")));
    List.generate(7, (index) => singleTextModelList3.add(SingleTextModel(singleText: "", topLabelText: "top label $index", bottomLabelText: "bottom label $index")));
    super.initState();
  }

  InputBorder getInputBorder() => const OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.green,
          width: 3,
        ),
        borderRadius: BorderRadius.all(
          Radius.circular(
            70,
          ),
        ),
      );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(
              height: 100,
            ),
            DynamicSingleTextField(
              singleTextModelList: singleTextModelList1,
              showLabelsType: ShowLabelsTypeEnum.hideLabelsType,
              inputBorder: getInputBorder(),
              singleDynamicListHeight: 70,
              topLabelMarginBottom: 20,
              bottomLabelMarginTop: 20,
              enableInputBorder: getInputBorder(),
              disableInputBorder: getInputBorder(),
              focusedInputBorder: getInputBorder(),
              textInputType: TextInputType.number,
              onChangeSingleText: (String value, int index) {
                if (kDebugMode) {
                  print("value: $value index: $index");
                }
              },
              onValidationBaseOnLength: () {
                if (kDebugMode) {
                  print("validated");
                }
              },
            ),
            const SizedBox(
              height: 100,
            ),
            DynamicSingleTextField(
              singleTextModelList: singleTextModelList2,
              showLabelsType: ShowLabelsTypeEnum.showBothLabelsType,
              inputBorder: getInputBorder(),
              topLabelMarginBottom: 20,
              bottomLabelMarginTop: 20,
              enableInputBorder: getInputBorder(),
              disableInputBorder: getInputBorder(),
              focusedInputBorder: getInputBorder(),
              textInputType: TextInputType.number,
              onChangeSingleText: (String value, int index) {
                if (kDebugMode) {
                  print("value: $value index: $index");
                }
              },
              onValidationBaseOnLength: () {
                if (kDebugMode) {
                  print("validated");
                }
              },
            ),
            const SizedBox(
              height: 100,
            ),
            DynamicSingleTextField(
              singleTextModelList: singleTextModelList3,
              showLabelsType: ShowLabelsTypeEnum.showBothLabelsType,
              inputBorder: getInputBorder(),
              topLabelMarginBottom: 20,
              bottomLabelMarginTop: 20,
              textInputType: TextInputType.text,
              onChangeSingleText: (String value, int index) {
                if (kDebugMode) {
                  print("value: $value index: $index");
                }
              },
              onSubmitSingleText: (String value) {
                if (kDebugMode) {
                  print("value: $value");
                }
              },
              onValidationBaseOnLength: () {
                if (kDebugMode) {
                  print("validated");
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter动态单行文本输入插件dynamic_single_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态单行文本输入插件dynamic_single_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 dynamic_single_text_field 插件的示例代码。请注意，dynamic_single_text_field 并非一个官方或广泛认可的 Flutter 插件，因此这个示例将基于一个假设的插件功能进行编写。通常，一个动态单行文本输入插件可能会提供文本输入、验证、样式动态更改等功能。

首先，假设 dynamic_single_text_field 插件已经正确添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  dynamic_single_text_field: ^x.y.z  # 请替换为实际版本号

然后，在你的 Dart 文件中，你可以这样使用它：

import 'package:flutter/material.dart';
import 'package:dynamic_single_text_field/dynamic_single_text_field.dart';  // 假设的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic Single Text Field Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyDynamicTextField(),
        ),
      ),
    );
  }
}

class MyDynamicTextField extends StatefulWidget {
  @override
  _MyDynamicTextFieldState createState() => _MyDynamicTextFieldState();
}

class _MyDynamicTextFieldState extends State<MyDynamicTextField> {
  String _text = '';
  bool _isObscure = false;  // 假设有一个显示/隐藏密码的功能

  void _onChanged(String value) {
    setState(() {
      _text = value;
    });
  }

  void _toggleObscure() {
    setState(() {
      _isObscure = !_isObscure;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        // 使用假设的 DynamicSingleTextField
        DynamicSingleTextField(
          controller: TextEditingController(text: _text),
          onChanged: _onChanged,
          obscureText: _isObscure,  // 假设有 obscureText 参数
          decoration: InputDecoration(
            labelText: 'Enter text',
            suffixIcon: IconButton(
              icon: Icon(
                _isObscure ? Icons.visibility_off : Icons.visibility,
              ),
              onPressed: _toggleObscure,
            ),
          ),
          // 假设的其他参数，如验证、样式等
          validator: (value) {
            if (value.isEmpty) {
              return 'This field is required';
            }
            return null;
          },
          style: TextStyle(fontSize: 18),
        ),
        SizedBox(height: 16),
        Text('You entered: $_text'),
      ],
    );
  }
}

注意：

  1. 上面的代码是基于假设的 dynamic_single_text_field 插件的功能编写的。实际的插件可能有不同的 API 和参数。
  2. TextEditingController 用于控制文本输入。
  3. onChanged 回调用于处理文本变化。
  4. obscureText 参数假设用于显示/隐藏密码，这是一个常见的功能，但具体实现取决于插件本身。
  5. validator 用于简单的文本验证。
  6. style 用于设置文本样式。

如果你使用的插件有具体的文档或示例，请参考官方文档或示例代码以获得最准确的使用方式。如果插件不存在或功能不符，你可能需要寻找一个类似的插件或自己实现所需的功能。

回到顶部