Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the implementation method of flutter TextField line wrapping adaptation". In daily operation, I believe that many people have doubts about the implementation method of flutter TextField line wrapping adaptation. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the realization method of flutter TextField line wrapping adaptation?" Next, please follow the editor to study!

No matter which kind of interface frame input text box is a very important control, but it is found that the input box TextField in flutter introduces many, but how to combine the various properties to meet the needs of many articles is not clear, coupled with frequent changes in the version of the control, the introduction of many functions are relatively outdated properties. Now we need a Wechat-like input text box, such a very practical effect flutter how to achieve? The premise is to use existing attributes as much as possible, write little or no code.

What are the function points of this input text box first?

Can customize all kinds of spacing. Mainly the outer margin of the control (margin); the inner spacing (padding); can customize the style. Input box border (radius), stroke (border), color); typeface (size, color), prompt word (hint); adaptive. The larger the font size, the higher the height of the control while maintaining the specified inner and outer margins. The most important function: multi-line text. And the height of the control can increase the custom maximum number of lines with line wrapping: that is, the height does not increase infinitely with line wrapping, and after you specify the maximum number of lines of the control, the text box content can be scrolled. If you specify the maximum height of the control numerically, it is easy to truncate the text.

1 decoration 2 and 3 is very convenient in flutter, and the SQL attribute can satisfy almost any custom style.

4, no trouble, now the keyboardType: TextInputType.multiline attribute has been able to better support multi-line text

5. It is not troublesome to function alone. The attribute maxLines has been supported to specify the maximum number of rows.

The trouble is that the combination of these attributes is not ideal:

Only specify maxLines. The input box will show the height of the specified number of lines from the beginning, instead of increasing with line wrapping, you need to add the minLines: 1 attribute at the same time. It is best to explicitly add the keyboardType: TextInputType.multiline attribute. It seems that the old version will use TextInputType.text by default, so it cannot support multiple lines. The control is too high for a single line of text. This is because the default height of the control causes the inner margin to fail. Adaptive failure. The contentPadding property in decoration is specified, and as a result, the value of the inner margin is incorrect after the height of the control changes.

3 wrap_content 4 is actually a problem. We expect the font size to be adaptive and the margins unaffected, like the Android attribute. In this case, you need to use the isDense in InputDecoration to remove the redundant margins and display only the specified contentPadding.

Another point to note is that the parent node of TextField must not be ConstrainedBox or constraints that specifies Container. Now the control can control the height on its own!

The final result:

Row (children: [Text ('111'), Expanded (child: TextField (keyboardType: TextInputType.multiline, maxLines: 5, minLines: 1, decoration: const InputDecoration (hintText:' input', filled: true, fillColor: Colors.white, contentPadding: const EdgeInsets.symmetric (horizontal: 10, vertical: 5), isDense: true, border: const OutlineInputBorder (gapPadding: 0, borderRadius: const BorderRadius.all (Radius.circular (4)), borderSide: BorderSide (width: 1, style: BorderStyle.none,) Text ('222'),])

At this point, the study on "what is the implementation method of flutter TextField line wrapping adaptation" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.