Flutter lesson 8:输入框,时间日期选择

var _chooseDate;
var _chooseTime;

_showDatePicker() async {
  var date = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(1970),
    lastDate: DateTime(2050)
  );
  setState((){
    this._chooseDate = date.toString().split(" ")[0];
  });
}

_showTimePicker() async {
  var time = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now()
  );
  print(time);

  setState(() {
    this._chooseTime = time.toString().split("TimeOfDay(")[1].split(")")[0];
  });
}

flutter: 选择的日期是：2019-07-30 00:00:00.000
flutter: 选择的时间是：TimeOfDay(21:34)

const TextField({
  Key key,
  this.controller, //编辑框的控制器，跟文本框的交互一般都通过该属性完成，如果不创建的话默认会自动创建
  this.focusNode, //用于管理焦点
  this.decoration = const InputDecoration(), //输入框的装饰器，用来修改外观
  TextInputType keyboardType, //设置输入类型，不同的输入类型键盘不一样
  this.textInputAction,  //用于控制键盘动作（一般位于右下角，默认是完成），搜送，下一步等
  this.textCapitalization = TextCapitalization.none,
  this.style, //输入的文本样式
  this.strutStyle,
  this.textAlign = TextAlign.start, //输入的文本位置
  this.textDirection,  //输入的文字排列方向，一般不会修改这个属性
  this.autofocus = false, //是否自动获取焦点
  this.obscureText = false, //是否隐藏输入的文字，一般用在密码输入框中
  this.autocorrect = true, //是否自动校验
  this.maxLines = 1, //最大行
  this.minLines,
  this.expands = false,
  this.maxLength, //能输入的最大字符个数
  this.maxLengthEnforced = true, //配合maxLength一起使用，在达到最大长度时是否阻止输入
  this.onChanged, //输入文本发生变化时的回调
  this.onEditingComplete, //点击键盘完成按钮时触发的回调，该回调没有参数，(){}
  this.onSubmitted, //同样是点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(String){}
  this.inputFormatters, //对输入文本的校验
  this.enabled, //输入框是否可用
  this.cursorWidth = 2.0, //光标的宽度
  this.cursorRadius, //光标的圆角
  this.cursorColor, //光标的颜色
  this.keyboardAppearance,
  this.scrollPadding = const EdgeInsets.all(20.0),
  this.dragStartBehavior = DragStartBehavior.start,
  this.enableInteractiveSelection,
  this.onTap, //点击输入框时的回调(){}
  this.buildCounter,
  this.scrollPhysics,
})

TextField()

class _GetInputValueState extends State<GetInputValue> {
  var _controllerValue;
  
  @override
  Widget build(BuildContext context) {

    TextEditingController controller = TextEditingController();
    controller.addListener((){
      print(controller.text);
    });

    return Container(
      child: Column(
        children: <Widget>[
          TextField(
            controller: controller,
          ),
          TextField(
            onChanged: (text){
              setState(() {
                _controllerValue = text;
              });
            },
          ),
          Text(_controllerValue == null ? "输入框没有值" : _controllerValue),
        ],
      ),
    );
  }
}

TextField(
  onChanged: (text){
    setState(() {
      _controllerValue = text;
    });
  },
),

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(InuptStyle());

class InuptStyle extends StatefulWidget {
  InuptStyle({Key key}) : super(key: key);

  _InuptStyleState createState() => _InuptStyleState();
}

class _InuptStyleState extends State<InuptStyle> {
  // 输入字数限制
  var _inputLength = 0;
  var _maxWords = 16;

  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.person),
              labelText: '手机号',
              labelStyle: TextStyle(
                color: Colors.red
              ),
              helperText: "用于下方的提示：请输入手机号",
              prefixText: "+86"
            ),
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.phone
          ),
          TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.lock),
              labelText: '密码',
              // 帮助信息
              helperText: "用于下方的提示：请输入密码",
              helperStyle: TextStyle(
                color: Colors.green
              ),
              hintText: "输入框的提示文字",
              suffixIcon: Icon(Icons.remove_red_eye)
            ),
            keyboardType: TextInputType.text
          ),
          TextField(
            decoration: InputDecoration(
              // border 还有一个 UnderlineInputBorder 就是默认的
              // InputBorder.none 可以设置为没有边框，可以去掉边框
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.red,
                  width: 10
                )
              ),
              icon: Icon(Icons.recent_actors),
              labelText: '输入字数限制',
              hintText: "输入框的提示文字",
              suffixIcon: Icon(Icons.remove_red_eye),
              // 右下角显示输入的字数
              counterText: "$_inputLength/$_maxWords"
            ),
            maxLength: _maxWords,
            onChanged: (text){
              if( text.length > 16 ){
                Fluttertoast.showToast(
                  msg: "输入超出长度限制"
                );
              } else {
                setState(() {
                  _inputLength = text.length;
                });
              }
            },
            keyboardType: TextInputType.text
          )
        ],
      ),
    );
  }
}