{"id":1151,"date":"2023-03-16T22:09:54","date_gmt":"2023-03-16T14:09:54","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1151"},"modified":"2023-03-16T22:10:01","modified_gmt":"2023-03-16T14:10:01","slug":"flutter-widget-textfield","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/16\/flutter-widget-textfield\/","title":{"rendered":"Flutter Widget\u4e4bTextField"},"content":{"rendered":"<p>Widget\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/flutter.io\/docs\/development\/ui\/widgets\">https:\/\/flutter.io\/docs\/development\/ui\/widgets<\/a><br \/>\nTextField\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/material\/TextField-class.html\">https:\/\/docs.flutter.io\/flutter\/material\/TextField-class.html<\/a><br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<p><!-- more --><\/p>\n<pre><code class=\"language-dart\">import &#039;package:flutter\/material.dart&#039;;\nimport &#039;package:flutter\/services.dart&#039;;\n\nclass TextFieldDemoPage extends StatefulWidget {\n  @override\n  State&lt;StatefulWidget&gt; createState() =&gt; new _TextFieldDemoPageState();\n}\n\nclass _TextFieldDemoPageState extends State&lt;TextFieldDemoPage&gt; {\n  @override\n  Widget build(BuildContext context) {\n    final controller = TextEditingController();\n    controller.addListener(() {\n      print(&#039;input ${controller.text}&#039;);\n    });\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(&#039;TextField Demo&#039;),\n      ),\n      body: SingleChildScrollView(\n        child: Padding(\n          padding: const EdgeInsets.all(20.0),\n          \/\/ child: TextFieldBuilder.buildCustomTextField(controller),\n          child: Column(\n            children: TextFieldBuilder.buildDecorationTextField(controller),\n          )\n        ),\n      )\n    );\n  }\n}\n\nclass TextFieldBuilder {\n  static Widget buildBasicTextField(TextEditingController controller) {\n    return TextField(\n      controller: controller,\n    );\n  }\n\n  static Widget buildCustomTextField(TextEditingController controller) {\n    return TextField(\n      controller: controller,\n      maxLength: 30, \/\/\u6700\u5927\u957f\u5ea6\uff0c\u8bbe\u7f6e\u6b64\u9879\u4f1a\u8ba9TextField\u53f3\u4e0b\u89d2\u6709\u4e00\u4e2a\u8f93\u5165\u6570\u91cf\u7684\u7edf\u8ba1\u5b57\u7b26\u4e32\n      maxLines: 1, \/\/\u6700\u5927\u884c\u6570\n      autocorrect: true, \/\/\u662f\u5426\u81ea\u52a8\u66f4\u6b63\n      autofocus: true, \/\/\u662f\u5426\u81ea\u52a8\u5bf9\u7126\n      obscureText: true, \/\/\u662f\u5426\u662f\u5bc6\u7801\n      textAlign: TextAlign.center, \/\/\u6587\u672c\u5bf9\u9f50\u65b9\u5f0f\n      style: TextStyle(fontSize: 30.0, color: Colors.blue), \/\/\u8f93\u5165\u6587\u672c\u7684\u6837\u5f0f\n      inputFormatters: [WhitelistingTextInputFormatter.digitsOnly], \/\/\u5141\u8bb8\u7684\u8f93\u5165\u683c\u5f0f\n      onChanged: (text) { \/\/\u5185\u5bb9\u6539\u53d8\u7684\u56de\u8c03\n        print(&#039;change $text&#039;);\n      },\n      onSubmitted: (text) { \/\/\u5185\u5bb9\u63d0\u4ea4(\u6309\u56de\u8f66)\u7684\u56de\u8c03\n        print(&#039;submit $text&#039;);\n      },\n      enabled: true, \/\/\u662f\u5426\u7981\u7528\n    );\n  }\n\n  static List&lt;Widget&gt; buildDecorationTextField(TextEditingController controller) {\n    return &lt;Widget&gt;[\n      TextField(\n        controller: controller,\n        decoration: InputDecoration(fillColor: Colors.blue.shade100, filled: true, labelText: &#039;Hello&#039;),\n      ),\n      SizedBox(height: 20),\n      \/\/\u663e\u793aplaceholder\n      TextField(\n        controller: controller,\n        decoration: InputDecoration(fillColor: Colors.blue.shade100, filled: true, hintText: &#039;Hello&#039;, errorText: &#039;error&#039;),\n      ),\n      SizedBox(height: 20),\n      \/\/\u663e\u793aicon\n      TextField(\n        controller: controller,\n        decoration: InputDecoration(\n        fillColor: Colors.blue.shade100,\n        filled: true,\n        helperText: &#039;help&#039;,\n        prefixIcon: Icon(Icons.local_airport),\n        suffixText: &#039;airport&#039;),\n        ),\n      SizedBox(height: 20),\n      \/\/\u5706\u89d2\u77e9\u5f62\u8fb9\u6846\n      TextField(\n        controller: controller,\n        decoration: InputDecoration(\n          contentPadding: EdgeInsets.all(10.0),\n          border: OutlineInputBorder(\n            borderRadius: BorderRadius.circular(15.0),\n            borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)\n          )),\n        ),\n      \/\/\u6539\u53d8\u88c5\u9970\u7ebf\u989c\u8272\uff0c\u53c2\u8003\uff1ahttps:\/\/stackoverflow.com\/questions\/49600139\/how-to-change-textfield-underline-color\n      SizedBox(height: 20),\n      Theme(\n        data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),\n        child: TextField(\n          controller: controller,\n          decoration: InputDecoration(\n            contentPadding: EdgeInsets.all(10.0),\n            border: OutlineInputBorder(\n              borderRadius: BorderRadius.circular(15.0),\n                borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)\n              )\n            ),\n          ),\n        ),\n      SizedBox(height: 20),\n      \/\/\u6539\u53d8\u8fb9\u6846\u7684\u7c97\u7ec6\n      Container(\n        padding: const EdgeInsets.all(8.0),\n        alignment: Alignment.center,\n        height: 60.0,\n        decoration: new BoxDecoration(\n          color: Colors.blueGrey,\n          border: new Border.all(color: Colors.black54, width: 4.0),\n          borderRadius: new BorderRadius.circular(12.0)\n        ),\n        child: new TextFormField(\n          controller: controller,\n          decoration: InputDecoration.collapsed(hintText: &#039;hello&#039;),\n          ),\n        )\n    ];\n  }\n\n}<\/code><\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/www.yezhou.me\/AppBlog\/images\/Flutter\/Flutter_Widget_TextField_Password.png\" alt=\"Flutter Widget TextField Password\" \/><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.yezhou.me\/AppBlog\/images\/Flutter\/Flutter_Widget_TextField_Decoration.png\" alt=\"Flutter Widget TextField Decoration\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Widget\uff1ahttps:\/\/flutter.io\/docs\/development\/ui\/widgets T [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[305],"class_list":["post-1151","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter-widget"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1151"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1151\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}