当前位置：网站首页>[flutter topic] 64 illustration basic textfield text input box (I) ＃ yyds dry goods inventory ＃

[flutter topic] 64 illustration basic textfield text input box (I) ＃ yyds dry goods inventory ＃

2022-07-05 01:04:00 【A Ze little monk】

       I've been learning the basics recently Flutter Widget, The reason is that many basic components have many considerations that are easy to ignore , After understanding and being familiar with it, the overall development cognition will be improved ; Let's learn the dishes today TextField Text input box ;

Source code analysis 

const TextField({
    Key key,
    this.controller,                    //  Control is editing text 
    this.focusNode,                     //  Get keyboard focus 
    this.decoration = const InputDecoration(),              //  Border decoration 
    TextInputType keyboardType,         //  Keyboard type 
    this.textInputAction,               //  Keyboard operation button type 
    this.textCapitalization = TextCapitalization.none,      //  Configure case keyboard 
    this.style,                         //  Type the text style 
    this.textAlign = TextAlign.start,   //  Alignment mode 
    this.textDirection,                 //  The text direction 
    this.autofocus = false,             //  Auto focus or not 
    this.obscureText = false,           //  Hide content , For example, the password format 
    this.autocorrect = true,            //  Whether to automatically correct 
    this.maxLines = 1,                  //  Maximum number of rows 
    this.maxLength,                     //  The maximum length allowed to enter 
    this.maxLengthEnforced = true,      //  Whether the maximum input length is allowed to be exceeded 
    this.onChanged,                     //  Callback when text content changes 
    this.onEditingComplete,             //  Call back when submitting content 
    this.onSubmitted,                   //  Call back when the user prompts to complete 
    this.inputFormatters,               //  Validation and format 
    this.enabled,                       //  Is it not clickable 
    this.cursorWidth = 2.0,             //  Cursor width 
    this.cursorRadius,                  //  Cursor fillet radian 
    this.cursorColor,                   //  Cursor color 
    this.keyboardAppearance,            //  Keyboard brightness 
    this.scrollPadding = const EdgeInsets.all(20.0),        //  When scrolling into a view , Fill in the margins 
    this.enableInteractiveSelection,    //  Long press to show 【 shear / Copy / Paste menu LengthLimitingTextInputFormatter】
    this.onTap,                         //  Call back when you click 
})

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    • 
      
  • 6.
    • 
      
  • 7.
    • 
      
  • 8.
    • 
      
  • 9.
    • 
      
  • 10.
    • 
      
  • 11.
    • 
      
  • 12.
    • 
      
  • 13.
    • 
      
  • 14.
    • 
      
  • 15.
    • 
      
  • 16.
    • 
      
  • 17.
    • 
      
  • 18.
    • 
      
  • 19.
    • 
      
  • 20.
    • 
      
  • 21.
    • 
      
  • 22.
    • 
      
  • 23.
    • 
      
  • 24.
    • 
      
  • 25.
    • 
      
  • 26.
    • 
      
  • 27.
    • 
      
  • 28.
    • 
      
  • 29.
    • 
      
  • 30.
    •

       Analysis of the source code can be ,TextField It's state StatefulWidget, There are rich properties , High customization , In practice, we need to make rational use of all kinds of callback ;

Case study

  1. Side dishes try the most basic TextField, Distinguish between default state and get focus state ;
return TextField();

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_0 Based on learning Flutter

  1. The side dish tried the relevant properties of the cursor ;cursorColor Color the cursor ,cursorWidth Is the cursor width ,cursorRadius Fillet the cursor ; among Radius Provides circle Fillets and elliptical There are two kinds of non rounded corners ;
return TextField(cursorColor: Colors.purple.withOpacity(0.4), cursorWidth: 10.0, cursorRadius: Radius.circular(4.0));

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_0 Based on learning Flutter_02

  1. textAlign Is the starting position of the text , The cursor can be left according to the business / be at the right / Center, etc ; Note that it's just the beginning of the text ;textDirection Ask the direction of the text , From left to right or from right to left ;
return TextField(style: TextStyle(color: Colors.purple.withOpacity(0.7), fontSize: 18.0), textAlign: TextAlign.right);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter Side dish _03

  1. maxLength Is the character length , The default setting is to display one line , And there is a comparison between the edit length and the overall length in the lower right corner ; And maxLengthEnforced coordination ,maxLengthEnforced by true When the maximum character length is reached, it cannot be edited ; by false You can continue to edit when the display is different ;
return TextField(maxLength: 30, maxLengthEnforced: true);
return TextField(maxLength: 30, maxLengthEnforced: false);

     
    
      
  • 1.
    • 
      
  • 2.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter Side dish _04【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter Side dish _05

  1. Set up maxLength Then there is a character counter in the lower right corner by default , Set up TextField.noMaxLength You can only display the number of input characters ;
return TextField(maxLength: TextField.noMaxLength);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _06

  1. maxLines Is the maximum number of rows allowed to be displayed , In the use of maxLength When the content exceeds one line, it will not wrap automatically , Because the default maxLines=1, This is set to null Or fix the number of display lines to automatically wrap ; The difference lies in null Will show multiple lines , and maxLines At most, only the set number of lines will be displayed ;
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: null);
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: 2);

     
    
      
  • 1.
    • 
      
  • 2.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Android Vegetable bird _07【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _08

  1. obscureText Whether to hide the edited content , Common password formats ;
return TextField(obscureText: true);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _09

  1. enableInteractiveSelection Press and hold to see if there is 【 shear / Copy / Paste 】 menu ; Do not empty ;
return TextField(enableInteractiveSelection: false);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _10

  1. keyboardAppearance For keyboard brightness , Include Brightness.dark/light Two kinds of , But only iOS equipment ;
return TextField(keyboardAppearance: Brightness.dark);

     
    
      
  • 1.
    •
  1. textCapitalization Text case ; Theoretically sentences Capitalize the first letter of each sentence ;characters Capitalize each letter ;words Capitalize the first letter of each word ; But this attribute is limited to text keybord, There are many ways to change dishes locally, which have not been realized , To be studied ;
return TextField(textCapitalization: TextCapitalization.sentences);

     
    
      
  • 1.
    •
  1. keyboardType For keyboard type , The small dish is divided into numeric keyboard and alphabetic keyboard ; Depending on the type of keyboard you set , The keyboard will be different ;

a. The keypad
–1-- datetime It can be accessed at any time on the keyboard : and /;
–2-- phone It can be accessed at any time on the keyboard # and *;
–3-- number It can be accessed at any time on the keyboard + - * /

b. Alphabetic keyboard
–1-- emailAddress It can be accessed at any time on the keyboard @ and .;
–2-- url It can be accessed at any time on the keyboard / and .;
–3-- multiline Applicable to multi line text wrapping ;
–4-- text Default alphabetic keyboard ;

return TextField(keyboardType: TextInputType.number);
return TextField(keyboardType: TextInputType.emailAddress);

     
    
      
  • 1.
    • 
      
  • 2.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_0 Based on learning Flutter_11【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _12

  1. textInputAction It is usually the operation type in the lower right corner of the keyboard , The side dishes have been cleaned up a little before , There are many types , I suggest you try more ;
return TextField(textInputAction: TextInputAction.search);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _13

  1. autofocus Get focus automatically , Enter the page and get the focus first , And pop up the keyboard , If there are more than one in the page TextField Set up autofocus by true Get the first focus first ;
return TextField(autofocus: true);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _14

  1. focusNode Get focus manually , It can cooperate with keyboard input to reduce the number of user operations , Get the next... Directly TextField The focus of ;
FocusScope.of(context).requestFocus(node);

return TextField(focusNode: node);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    •
  1. enabled Set to false after TextField In non editable status ;
return TextField(enabled: false);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _15

  1. decoration Decorate the border , This can be used to adjust TextField Show the effect ; You can set the front icon , Post picture , Border properties , Content properties, etc , The side dishes will be tried in the follow-up ; To completely delete the decoration , take decoration Set it to blank ;
return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _16

  1. inputFormatters Format validation , For example, the original Android There are usually restrictions on entering mobile phone number or other special characters , stay Flutter You can also use this to limit the format , Including regular expressions ; Need to introduce package:flutter/services.dart;

a. LengthLimitingTextInputFormatter Limit the maximum characters ;

b. WhitelistingTextInputFormatter Only characters in the whitelist are allowed ; Such as digitsOnly Only numbers... Are supported [0-9];

c. BlacklistingTextInputFormatter Prevent the input of characters in the blacklist ; Such as singleLineFormatter Force a single line ; Analysis of the source code RegExp(“[/\]”) Regular expressions can be set ;

return TextField(inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(12),
  WhitelistingTextInputFormatter.digitsOnly,
  BlacklistingTextInputFormatter.singleLineFormatter
]);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    •
  1. onChanged Callback when text content changes , It can monitor in real time TextField Input content ;
Center(child: Text(_textStr))

return TextField(onChanged: (text) {
  setState(() {
    _textStr = text;
  });
});

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    • 
      
  • 6.
    • 
      
  • 7.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter Side dish _17

  1. controller Text controller , Listen for input callback ;
TextEditingController controller = TextEditingController();

@override
void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {
      _textStr = controller.text;
    });
  });
}

return TextField(controller: controller);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    • 
      
  • 6.
    • 
      
  • 7.
    • 
      
  • 8.
    • 
      
  • 9.
    • 
      
  • 10.
    • 
      
  • 11.
    • 
      
  • 12.
    • 
      
  • 13.
    •
  1. onTap Click on TextField Time callback ;
return TextField(
  onTap: () {
    Toast.show('onTap!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.TOP);
  },
);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter Side dish _18

  1. onEditingComplete Callback when submitting content , It is usually called back when you click the enter button ;
return TextField(
  onEditingComplete: () {
    Toast.show('onEditingComplete!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _19

  1. onSubmit Callback when submitting , Not to onEditingComplete Use at the same time , The difference lies in onSubmit Is a callback with a return value ;
return TextField(
  onEditingComplete: () {
    Toast.show('onSubmitted -> $text!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter Side dish _20

Summary of problems

1. The keyboard pop-up will put the input box or other components on top ？

       When TextField Get focus pop-up input box , The input box may top up the elements in the page , To avoid this , Can be Scaffold in resizeToAvoidBottomPadding: false that will do ,resizeToAvoidBottomPadding Set whether to adjust automatically body Property the size of the control , To avoid Scaffold The bottom is covered ;

resizeToAvoidBottomPadding: false

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_0 Based on learning Flutter_21

resizeToAvoidBottomPadding: true

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Android Vegetable bird _22

2. Press and hold the input box to display 【 shear / Copy / Paste 】 How to set Chinese menu ？

       When TextField Set up enableInteractiveSelection Long press after attribute to display the menu , The default is English , By setting Flutter Internationalization to deal with ;

  1. stay pubspec.yaml In the integration flutter_localizations;
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    •
  1. stay MaterialApp Set the localization agent and supported language types in ;
return MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh', 'CN'),
    const Locale('en', 'US'),
  ]
}

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    • 
      
  • 4.
    • 
      
  • 5.
    • 
      
  • 6.
    • 
      
  • 7.
    • 
      
  • 8.
    • 
      
  • 9.
    • 
      
  • 10.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _23【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Android Vegetable bird _24

3. Use maxLength How to cancel the character counter in the lower right corner of the text box ？

  1. take maxLength Set to null Use only LengthLimitingTextInputFormatter Limit the maximum characters ;
return TextField(maxLength: null, inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(10)
]);

     
    
      
  • 1.
    • 
      
  • 2.
    • 
      
  • 3.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Android Vegetable bird _25

  1. Set up InputDecoration in **** Attribute is empty ; But there's room at the bottom , Just hide, not disappear ;
return TextField(decoration: InputDecoration(counterText: ""), maxLength: 10);

     
    
      
  • 1.
    •

【Flutter project 】64 The diagram is basically TextField Text input box ( One ) #yyds Dry inventory #_Flutter project _26

       Text box is an essential component in daily development , The side dish is still in the process of exploration , If you have any questions, please give more guidance ！

source ： Little monk aze

原网站

版权声明
本文为[A Ze little monk]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202141055326076.html

边栏推荐

猜你喜欢

随机推荐