TextField text entry box
Source analysis:
const the TextField ({ Key Key, the this .controller, // the control text being edited the this .focusNode, // keyboard focus the this .decoration = const InputDecoration (), // decorative frame TextInputType keyboardType, // keyboard type the this .textInputAction, // keyboard button type operating this .textCapitalization = TextCapitalization.none, // arranged keyboard case this .style, // enter text style this= TextAlign.START .textAlign, // alignment of the this .textDirection, // text direction the this .autofocus = to false , // whether the autofocus the this .obscureText = to false , // is hidden, like a password format of the this .autocorrect = to true , // whether to automatically correct the this .maxLines = . 1 , // the maximum number of rows the this .maxLength, // maximum input length of the this .maxLengthEnforced = to true , // if the input exceeds the maximum allowed length of this .onChanged, // callback when changing text this .onEditingComplete, // callback when submitting content this .onSubmitted, // callback when the user prompts to complete this .inputFormatters, // validate and format of this .Enabled, // if not click the this .cursorWidth = 2.0 , // cursor width of the this .cursorRadius, // cursor fillet arc the this .cursorColor, // color of the cursor the this .keyboardAppearance, // keyboard brightness the this .scrollPadding = const EdgeInsets.all ( 20.0 ), // when scrolled into view, the filler margins the this .enableInteractiveSelection, // press showing whether {cut / copy / paste menu LengthLimitingTextInputFormatter ] the this .onTap, // callback when clicking })
Analysis of the source code available, TextField is stateful StatefulWidget , there is a wealth of attributes, the custom of high practice requires reasonable use of callback;
1, the cursor associated attributes; The cursorColor is cursor color, cursorWidth cursor width, cursorRadius cursor fillet; wherein Radius Providing circle rounded and elliptical non fillet two kinds;
return TextField(cursorColor: Colors.purple.withOpacity(0.4), cursorWidth: 10.0, cursorRadius: Radius.circular(4.0));
2, textAlign a text starting position, Left / right home / business center, etc. according to the cursor; just pay attention to the direction of the beginning of the text; textDirection ask text direction, from left to right or right to left;
return TextField(style: TextStyle(color: Colors.purple.withOpacity(0.7), fontSize: 18.0), textAlign: TextAlign.right);
3, maxLength character length, the default setting is to show a line, and the lower right corner there is edited for length and overall length of the comparison; and maxLengthEnforced with, maxLengthEnforced is true reach can not be edited after the maximum character length; as false when editing may continue to show a difference ;
return TextField(maxLength: 30, maxLengthEnforced: true); return TextField(maxLength: 30, maxLengthEnforced: false);
4, set the maxLength after the lower right corner there is a default character counter, set TextField.noMaxLength can only show the number of input characters;
return TextField(maxLength: TextField.noMaxLength);
. 5, maxLines the maximum number of rows allowed to show, using maxLength when the content does not wrap more than one line, because the default maxLines =. 1 , at this time is set to null or the number of display lines can be fixed wrap; except that the null will show multiple OK, but maxLines up to only show to set the number of lines;
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: null); return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: 2);
6, obscureText is hidden editorial content, a common password format;
return TextField(obscureText: true);
. 7, enableInteractiveSelection press if there {cut / copy / paste menu]; not empty;
return TextField(enableInteractiveSelection: false);
. 8, keyboardAppearance keyboard luminance, comprising Brightness.dark / light two kinds, but only iOS device;
return TextField(keyboardAppearance: Brightness.dark);
9, textCapitalization text capitalization; theoretically sentences to capitalize the first letter of every word; characters for each capital letters; words for each word capitalized; but the property is limited to text keybord , replace a variety of local monks way has not been achieved, to be studied;
return TextField(textCapitalization: TextCapitalization.sentences);
10, keyboardType keyboard type, Monk appreciated whole is divided into a keyboard, numeric keypad and letters; set according to the type of keyboard, the keyboard will be different;
. a numeric keypad
--1-- datetime keyboard readily accessible : and / ;
--2-- Phone on the keyboard can be accessed at any time # and *;
--3-- Number keyboard readily accessible + - * /
b. alphanumeric keyboard
--1-- emailAddress keyboard readily accessible @ and. ;
--2-- URL on the keyboard can be accessed at any time and /. ;
--3-- the multiline for multi-line text wrap;
--4 - text default alphabet keyboard;
return TextField(keyboardType: TextInputType.number); return TextField(keyboardType: TextInputType.emailAddress);
11, textInputAction usually bottom right corner of the keyboard type, numerous types, it is recommended to try a lot;
return TextField(textInputAction: TextInputAction.search);
12 is, autofocus whether to automatically acquire focus, the focus priority access to enter the page, and the pop-up keyboard, if a plurality of pages TextField set autofocus is true then the first focus priority access;
return TextField(autofocus: true);
13 is, focusNode obtained manually focus, may be reduced with the number of user keyboard input operation, direct access to the next TextField focus;
FocusScope.of(context).requestFocus(node); return TextField(focusNode: node);
14, Enabled set to false after TextField is not editable state;
return TextField(enabled: false);
15, decoration for the border modifications can take to adjust TextField display of results; you can set the icon front, rear picture frame attributes, content attributes, etc., will focus on the follow-up attempt; To completely remove the decoration, the decoration is set to null you can;
return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));
16, inputFormatters format verification, e.g. native Android typically limit the input phone number or other special characters, the Flutter also can take to limit the format, including regular expressions; necessary to introduce the use of package: flutter / services.dart ;
. A LengthLimitingTextInputFormatter maximum length of the character;
. B WhitelistingTextInputFormatter only allows the input character whitelist; as digitsOnly supports only digital [0-9] ;
. C BlacklistingTextInputFormatter prevent the input characters blacklist; as singleLineFormatter forcibly enter single; Analysis source RegExp ( "[/ \]" ) may be provided regular expressions;
return TextField(inputFormatters: <TextInputFormatter>[ LengthLimitingTextInputFormatter(12), WhitelistingTextInputFormatter.digitsOnly, BlacklistingTextInputFormatter.singleLineFormatter ]);
17, onChanged text contents change callback, real-time monitor TextField input content;
Center(child: Text(_textStr)) return TextField(onChanged: (text) { setState(() { _textStr = text; }); });
18, the Controller text control, monitor typing callback;
TextEditingController controller = TextEditingController(); @override void initState() { super.initState(); controller.addListener(() { setState(() { _textStr = controller.text; }); }); } return TextField(controller: controller);
19, onTap click TextField callback;
return TextField( onTap: () { Toast.show('onTap!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.TOP); }, );
20, onEditingComplete when submitting content callback, the callback is usually when you click the Enter button;
return TextField( onEditingComplete: () { Toast.show('onEditingComplete!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER); }, );
21 is, onSubmit callback time of filing, not with onEditingComplete used simultaneously, except that onSubmit is the return value of the callback;
return TextField( onEditingComplete: () { Toast.show('onSubmitted -> $text!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER); }, );
Summary question:
1. Keyboard input box will pop up on top of other components or go?
When TextField acquiring focus popup input box might block elements in the page to the top, to avoid this situation, you can be Scaffold in resizeToAvoidBottomPadding: false can, resizeToAvoidBottomPadding set whether to automatically adjust the size of the properties of the control body, to avoid Scaffold bottom is covered;
resizeToAvoidBottomPadding: false
2. How long appear in the input box [Cut / Copy / Paste] menu settings for Chinese?
When TextField set enableInteractiveSelection the property long press the menu will appear, default is English, by setting Flutter to deal with the internationalization;
(1) In pubspec.yaml integration flutter_localizations ;
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
(2) In MaterialApp setting agents and localization types supported languages;
return MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ const Locale('zh', 'CN'), const Locale('en', 'US'), ] }
How to cancel the bottom right of the text box character counter 3. When using maxLength?
(1) The maxLength set to null using only LengthLimitingTextInputFormatter maximum length of the character;
return TextField(maxLength: null, inputFormatters: <TextInputFormatter>[ LengthLimitingTextInputFormatter(10) ]);
(2) Set InputDecoration in ** decoration ** property is empty; but spare the bottom, and not just hide disappear;
return TextField(decoration: InputDecoration(counterText: ""), maxLength: 10);
This switched: A young monk policy, only for personal learning