当前位置:网站首页>Detailed explanation of shutter textfield

Detailed explanation of shutter textfield

2022-06-26 19:54:00 InfoQ

effect :


null
Finally, it's still right
TextField
Let's go , This attribute has the most 、 With the most function points Widget.

Basic attributes

TextField
It's a
material design
Style input box , It has many properties , Besides, decorators
InputDecoration
There are also many attributes , But it's all simpler , So don't worry about , And listen to me .

First look at the source code , Important or commonly used attributes are annotated .
TextField
 const TextField({
 Key key,
 this.controller,// controller
 this.focusNode,// The focus of
 this.decoration = const InputDecoration(),// decorate
 TextInputType keyboardType,// Keyboard type , Input type
 this.textInputAction,// Keyboard button
 this.textCapitalization = TextCapitalization.none,// Case write
 this.style,// style
 this.strutStyle,
 this.textAlign = TextAlign.start,// Alignment mode
 this.textDirection,
 this.autofocus = false,// Autofocus
 this.obscureText = false,// Whether to hide the text , The password type is displayed
 this.autocorrect = true,// AutoCorrect
 this.maxLines = 1,// Maximum number of rows , The height is synchronized with the number of rows
 this.minLines,// The minimum number of lines
 this.expands = false,
 this.maxLength,// Maximum number of entries , When there is a value, there will be a counter in the lower right corner
 this.maxLengthEnforced = true,
 this.onChanged,// Input change callback
 this.onEditingComplete,// When input is complete , coordination TextInputAction.done Use
 this.onSubmitted,// When submitting , coordination TextInputAction
 this.inputFormatters,// Input verification
 this.enabled,// Is it available
 this.cursorWidth = 2.0,// Cursor width
 this.cursorRadius,// Cursor fillet
 this.cursorColor,// Cursor color
 this.keyboardAppearance,
 this.scrollPadding = const EdgeInsets.all(20.0),
 this.dragStartBehavior = DragStartBehavior.start,
 this.enableInteractiveSelection,
 this.onTap,// Click event
 this.buildCounter,
 this.scrollPhysics,
 }) 

Many parameters , In fact, even half of the attributes are not used in daily development , But I will try my best to introduce .
InputDecoration
 const InputDecoration({
 this.icon,// The icon outside the left
 this.labelText,// Suspended prompt , May replace hintText
 this.labelStyle,// Style of floating prompt text
 this.helperText,// Help text
 this.helperStyle,
 this.hintText,// Input prompt
 this.hintStyle,
 this.hintMaxLines,
 this.errorText,// Error message
 this.errorStyle,
 this.errorMaxLines,
 this.hasFloatingPlaceholder = true,// Whether to display levitation prompt text
 this.isDense,
 this.contentPadding,// Infill
 this.prefixIcon,// The icon in the left side
 this.prefix,
 this.prefixText,// Text on the left
 this.prefixStyle,
 this.suffixIcon,// Right inner icon
 this.suffix,
 this.suffixText,
 this.suffixStyle,
 this.counter,// Custom counters
 this.counterText,// Count text
 this.counterStyle,// Count style
 this.filled,// Whether to fill
 this.fillColor,// Fill color
 this.errorBorder,
 this.focusedBorder,
 this.focusedErrorBorder,
 this.disabledBorder,
 this.enabledBorder,
 this.border,// Frame
 this.enabled = true,
 this.semanticCounterText,
 this.alignLabelWithHint,
 })

Many parameters , It is mostly an icon of a small function point 、 Text and style , Is not complicated .

ok, Go through the basic attributes , Just have an impression in your mind . Let's start practicing .

style

Basic style
 TextField(),

It's simple , No parameters , Of course, the effect is also very simple .

null
style You can change the style .
Hide text
modify
obscureText
Property value

 TextField(
 obscureText: true,
 ),

null
You can see that the input is no longer visible , It has become a common type of password .
Keyboard type
Keyboard type   namely   Types that can be entered , such as
number
You can only enter numbers

 TextField(
 keyboardType: TextInputType.number,
 ),

null
TextInputType
optional type :

  • text
  • multiline
  • number
  • phone
  • datetime
  • emailAddress
  • url
Keyboard button
The button in the lower right corner of the keyboard , Common examples are completion , In the lower right corner is a completion check button , The picture above shows .

 TextField(
 textInputAction: TextInputAction.done,
 ),

TextInputAction
The other options :

  • none
  • unspecified
  • done
  • go
  • search
  • send
  • next
  • previous
  • continueAction
  • join
  • route
  • emergencyCall
  • newline
Case write
That is to control the case of input English letters , For example, the first letter of a word is capitalized

 TextField(
 textCapitalization: TextCapitalization.words,
 ),

null
TextCapitalization
Other options for :

  • words: Capitalize the first letter of a word
  • sentences: The first letter of a sentence is capitalized
  • characters: All capitals
  • none: The default is no
cursor
The default is a blue vertical bar

 TextField(
 cursorColor: Colors.orange,
 cursorWidth: 15,
 cursorRadius: Radius.circular(15),
 ),

null
Maximum number of rows
Set up the most 3 That's ok

 TextField(
 maxLines: 3,
 ),

null
It can be seen from the effect that ,TextField The height has become 3 That's ok . But I just want to input at most 3 That's ok , Acquiescence or 1 What about the height of the row ? Don't panic , Just add a parameter : 
minLines

 TextField(
 maxLines: 3,
 minLines: 1,
 ),

null
You can see ,TextField The height of is adaptive .
Counter
That is, there will be a count in the lower right corner

 TextField(
 maxLength: 8,
 ),

null
Default : Current input length / Maximum length , Can we change this place , Certainly. , Here is a simple operation

 TextField(
 maxLength: 8,
 decoration: InputDecoration(
 counter: Text(" Custom count  0/100"),
 ),
 ),

null
Here I use decoration
InputDecoration
Under the
counter
, The type is
widget
, Then the expansion degree is quite high , I only used one
Text
, other widget It's OK, too .

If it's just pure words ,InputDecoration There's another one
counterText
Properties and
counterStyle
.
Icon
The icon has 3 Kind of :

  • The icon outside the left

 TextField(
 decoration: InputDecoration(
 icon: Icon(Icons.person),
 ),
 ),

null
  • Left inner icon

 TextField(
 decoration: InputDecoration(
 prefixIcon: Icon(Icons.phone_android),
 ),
 ),

null
  • Right inner icon

 TextField(
 decoration: InputDecoration(
 suffixIcon: IconButton(
 icon: Icon(Icons.close),
 onPressed: () {
 controller.clear();
 },
 ),
 ),
 ),

null
Added an icon on the right
IconButton
, Because it has a click event , We can clear it when we click TextField The content in .

The above is the introduction of the icon , In fact, in addition to icons , The corresponding position can also display text or customize other widget For example, something happened
prefixIcon
There are other 3 Attributes , The usage is the same as the custom counter described above .

 this.prefix,
 this.prefixText,
 this.prefixStyle,
Prompt text
The prompt text has 4 Kind of :

  • Input prompt text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 hintText: ' Please enter your account number aaa',
 ),
 ),

null
  • Floating prompt text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 hintText: ' Please enter your account number aaa',
 labelText: ' Please enter your account number ',
 ),
 ),

null
You can see , Default display
labelText
, Only after focusing
hintText
, therefore labelText It can replace hintText Of .

  • Help prompt text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 helperText: " Help text ",
 helperStyle: TextStyle(color: Colors.blue)
 ),
 ),

null
Always on the bottom left

  • Error message text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 errorText: " You didn't enter anything ",
 ),
 ),

null
Remove underscores
 TextField(
 decoration: InputDecoration.collapsed(hintText: " Input box without underline "),
 ),

null
It's fine too
decoration: null
,  The difference is that there is no hintText 了
Frame
 TextField(
 decoration: InputDecoration(
 border: OutlineInputBorder(),
 ),
 ),

null
If this fillet doesn't like it , You can also change it , such as :

 TextField(
 decoration: InputDecoration(
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(30)),
 ),
 ),
 ),

null

Get input

There are two ways :

  • onChanged
    onChanged
    It is a callback when the input content changes , Return to one
    String
    Type value , You can use a variable to record

 TextField(
 onChanged: (text) {
 print(" When input changes " + text);
 },
 ),

  • controller I.e. controller , initialization :

 var controller;

 @override
 void initState() {
 super.initState();
 controller = TextEditingController();
 controller.addListener(() {});
 }

Configure to TextField

 TextField(
 controller: controller,
 ),

Get content

controller.text

Called in events
controller.text
That is, return the input content .

Turn off the soft keyboard

Often when we submit an event , You need to turn off the soft keyboard

Here we use
focusNode

initialization :

FocusNode userFocusNode = FocusNode();

To configure :

 TextField(
 focusNode: userFocusNode,
 ),

Then call... Where you need it :

userFocusNode.unfocus();

check

In fact, there is a
inputFormatters
attribute

 final List<TextInputFormatter> inputFormatters;

Continue to look at TextInputFormatter Source code , Yes 3 A subclass :

  • BlacklistingTextInputFormatter
  • WhitelistingTextInputFormatter
  • LengthLimitingTextInputFormatter

The blacklist 、 White list and length limit , Let's find a random one to see how the source code implements verification :

Looking down, you will see such a piece of code :

 static final BlacklistingTextInputFormatter singleLineFormatter
 = BlacklistingTextInputFormatter(RegExp(r'\n'));

The key words are
RegExp
, In fact, it is just the regular expression we usually use .

In this case , We can also customize the verification rules , For example, check the mobile phone number :

 String validateMobile(String value) {
 String patttern = r'(^[0-9]*$)';
 RegExp regExp = new RegExp(patttern);
 if (value.length == 0) {
 return &quot; Cell phone number is empty &quot;;
 } else if (!regExp.hasMatch(value)) {
 return &quot; The phone number format is incorrect &quot;;
 }
 return null;
 }

The above is just our general verification , For forms, it is recommended to use
From
The parcel
TextFormField

abnormal

  • After the soft keyboard pops up
  • After the soft keyboard pops up, the height overflows

terms of settlement
: Wrap with sliding components (ListView etc. ), When the soft keyboard pops up , The input box will also automatically slide up .

<br>

summary

That's all , Then I wrote a small log in demo:

null
github:
https://github.com/yechaoa/wanandroid_flutter
Official documents :https://api.flutter.dev/flutter/material/TextField-class.html

<br>

Writing is not easy to , If it's useful, just like it or star Chant

<br>
原网站

版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/177/202206261943488401.html