Flutter EditText编辑框

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyEditText(),//home就是整个屏幕
  ));
}

class MyEditText extends StatefulWidget {
  @override
  MyEditTextState createState() => MyEditTextState();//创建一个状态,=>就是调用该函数
}

class MyEditTextState extends State<MyEditText> {
  String results = "";//原来的内容是空的

  //创建文本控制器,TextEditingController _controller2 = new TextEditingController(text: "初始化的");
  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Using EditText"),
        backgroundColor: Colors.red,
      ),
      body: Container(//body就是把除了状态栏的部分看作是一个容器
        padding: const EdgeInsets.all(10.0),//上下左右都设置边距
        child: Center(
          child: Column(//在列的方向上,CrossAxisAlignment代表着控件是垂直方向的,stretch表示占满屏幕
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              TextField(//文本输入框,相当于EditText
                decoration: InputDecoration(hintText: "Enter text here..."),//decoration装饰器,其中的InputDecoration控制TextField的外观以及提示信息
                onSubmitted: (String str) {//点击确认键会调用这个方法
                  setState(() {
                    results = results + "\n" + str;//前面输入后的内容换行且加上新的内容,然后再做展示
                    //通过构造函数text设置的内容将会在TextField创建时就显示到输入框内
                    controller.text = "";
                  });
                },
                //绑定控制器
                controller: controller,
              ),
              Text(results)//当点击确认键后,会显示输入的信息
            ],
          ),
        ),
      ),
    );
  }
}