首页 文章详情

Element 系列组件之 ETextField

老孟Flutter | 269 2021-12-02 08:41 0 0 0
UniSMS (合一短信)

介绍

「ETextField」 组件是 「Flutter Element」 组件系列中的输入组件,封装了系统的 「TextField」 组件,封装了一些常用的功能,并解决了两个常见的错误,详见:

引入

  1. 在 「pubspec.yaml」 中依赖

    element_ui: ^0.0.1
  2. import

    import 'package:element_ui/widgets.dart';

基础用法

「ETextField」 默认显示圆角边框,

ETextField()

「placeholder」:设置提示文字。

ETextField(
  placeholder: 'please input',
)

「value」:设置初始值。

ETextField(
  value: 'Flutter Element',
)

「textStyle」: 设置字体样式。

ETextField(
  value: 'Flutter Element',
  textStyle: TextStyle(color: Colors.blue),
)

「placeholderTextStyle」:设置提示文字样式。

ETextField(
  placeholder: 'please input',
  placeholderTextStyle: TextStyle(color: Colors.red),
)

「clear」:是否显示清空按钮,默认false。

ETextField(
  placeholder: 'please input',
  clear: true,
)

「obscureText」:密码框

ETextField(
  obscureText: true,
)

「showPassword」:是否显示密码图标,默认false。

ETextField(
  obscureText: true,
  showPassword: true,
)

「height」:设置高度,设置不同的高度,文字都会居中,如果需要多行文本,查看 「maxLines」

ETextField(
  height: 30,
  value: 'Flutter Element',
),

ETextField(
  height: 140,
  value: 'Flutter Element',
)

「maxLines」 :多行文本域

ETextField(
  height: 200,
  placeholder: 'please input',
  maxLines: 10,
)

「showWordLimit」:显示字数统计

ETextField(
  showWordLimit: true,
  maxLength: 10,
),

ETextField(
  height: 200,
  maxLines: 10,
  showWordLimit: true,
  maxLength: 100,
),

「limitBuilder」:自定义字数统计

ETextField(
  height: 200,
  maxLines: 10,
  showWordLimit: true,
  maxLength: 100,
  limitBuilder: (context, length, maxLength) {
    return Row(
      children: [
        Text(
          '$length',
          style: const TextStyle(color: Colors.red),
        ),
        Text('/$maxLength'),
      ],
    );
  },
)

「style」:类型为 「ETextFieldStyle」

  • 「fontColor」:字体颜色,textStyle = null 时,使用此属性。
  • 「backgroundColor」:背景颜色。
  • 「placeholderColor」:提示文案颜色,placeholderTextStyle = null时,使用此属性。
  • 「borderColor」:线框颜色。
  • 「focusBorderColor」:获取焦点时线框颜色。
  • 「clearColor」:clear 图标颜色。
  • 「borderRadius」:线框圆角。
ETextField(
  value: 'Flutter Element',
  placeholder: 'please input',
  style: ETextFieldStyle(
    fontColor: Colors.red,
    backgroundColor: Colors.yellow,
    placeholderColor: Colors.red.withOpacity(.5),
    borderColor: Colors.green,
    focusBorderColor: Colors.blue,
    borderRadius: BorderRadius.circular(100),
  ),
)

suffix、prefix、maxLines、keyboardType、textInputAction、textCapitalization、textAlign、textAlignVertical、onChanged、onSubmitted、inputFormatters 这些属性和原生属性一样,具体用法可参考:http://laomengit.com/guide/widgets/TextField.html



你可能还喜欢

关注「老孟Flutter」
让你每天进步一点点
good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter