本頭條核心宗旨

歡迎來到「技術剛剛好」作者，「技術剛剛好」是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。

輸入框

技術剛剛好經歷

近幾年，移動端跨平臺開發技術層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術在移動端跨平臺開發中大展身手，技術剛剛好作為一名Android開發，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！

本文核心要點

顧名思義文本輸入框，類似於iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過這個功能，就不在做具體介紹了，接下來還是具體介紹下Flutter中TextField的用法。

TextField

TextField的構造方法：

 const TextField({    Key key,    this.controller,            //控制器，控制TextField文字    this.focusNode,    this.decoration: const InputDecoration(),      //輸入器裝飾    TextInputType keyboardType: TextInputType.text, //輸入的類型    this.style,    this.textAlign: TextAlign.start,    this.autofocus: false,    this.obscureText: false,  //是否隱藏輸入    this.autocorrect: true,    this.maxLines: 1,    this.maxLength,    this.maxLengthEnforced: true,    this.onChanged,            //文字改變觸發    this.onSubmitted,          //文字提交觸發（鍵盤按鍵）    this.onEditingComplete,  //當用戶提交可編輯內容時調用    this.inputFormatters,    this.enabled,    this.cursorWidth = 2.0,    this.cursorRadius,    this.cursorColor,    this.keyboardAppearance,  })

main.dat文件

import 'package:flutter/material.dart';void main() {  runApp(MaterialApp(    home: MyEditText(),  ));}class MyEditText extends StatefulWidget {  @override  MyEditTextState createState() => MyEditTextState();}class MyEditTextState extends State {  String results = "";  final TextEditingController controller = TextEditingController();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Using EditText"),        backgroundColor: Colors.red,      ),      body: Container(        padding: const EdgeInsets.all(10.0),        child: Center(          child: Column(            crossAxisAlignment: CrossAxisAlignment.stretch,            children: [              TextField(                decoration: InputDecoration(hintText: "Enter text here..."),                onSubmitted: (String str) {                  setState(() {                    results = results + "\\n" + str;                    controller.text = "";                  });                },                controller: controller,              ),              Text(results)            ],          ),        ),      ),    );  }}

總結

這篇文章主要介紹了flutter當中TextField控件介紹。

謝謝觀看技術剛剛好的文章，技術剛剛好是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。

閱讀更多 技術剛剛好 的文章

關鍵字: iOS GitHub Android