技術剛剛好經歷

近幾年，移動端跨平台開發技術層出不窮，從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<MyEditText> {
  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: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: "Enter text here..."),
                onSubmitted: (String str) {
                  setState(() {
                    results = results + "n" + str;
                    controller.text = "";
                  });
                },
                controller: controller,
              ),
              Text(results)
            ],
          ),
        ),
      ),
    );
  }
}

總結

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