Flutter Widget之TextField

Widget：https://flutter.io/docs/development/ui/widgets
TextField：https://docs.flutter.io/flutter/material/TextField-class.html
     

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

class TextFieldDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  @override
  Widget build(BuildContext context) {
    final controller = TextEditingController();
    controller.addListener(() {
      print('input ${controller.text}');
    });
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField Demo'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          // child: TextFieldBuilder.buildCustomTextField(controller),
          child: Column(
            children: TextFieldBuilder.buildDecorationTextField(controller),
          )
        ),
      )
    );
  }
}

class TextFieldBuilder {
  static Widget buildBasicTextField(TextEditingController controller) {
    return TextField(
      controller: controller,
    );
  }

  static Widget buildCustomTextField(TextEditingController controller) {
    return TextField(
      controller: controller,
      maxLength: 30, //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
      maxLines: 1, //最大行数
      autocorrect: true, //是否自动更正
      autofocus: true, //是否自动对焦
      obscureText: true, //是否是密码
      textAlign: TextAlign.center, //文本对齐方式
      style: TextStyle(fontSize: 30.0, color: Colors.blue), //输入文本的样式
      inputFormatters: [WhitelistingTextInputFormatter.digitsOnly], //允许的输入格式
      onChanged: (text) { //内容改变的回调
        print('change $text');
      },
      onSubmitted: (text) { //内容提交(按回车)的回调
        print('submit $text');
      },
      enabled: true, //是否禁用
    );
  }

  static List<Widget> buildDecorationTextField(TextEditingController controller) {
    return <Widget>[
      TextField(
        controller: controller,
        decoration: InputDecoration(fillColor: Colors.blue.shade100, filled: true, labelText: 'Hello'),
      ),
      SizedBox(height: 20),
      //显示placeholder
      TextField(
        controller: controller,
        decoration: InputDecoration(fillColor: Colors.blue.shade100, filled: true, hintText: 'Hello', errorText: 'error'),
      ),
      SizedBox(height: 20),
      //显示icon
      TextField(
        controller: controller,
        decoration: InputDecoration(
        fillColor: Colors.blue.shade100,
        filled: true,
        helperText: 'help',
        prefixIcon: Icon(Icons.local_airport),
        suffixText: 'airport'),
        ),
      SizedBox(height: 20),
      //圆角矩形边框
      TextField(
        controller: controller,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10.0),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15.0),
            borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)
          )),
        ),
      //改变装饰线颜色，参考：https://stackoverflow.com/questions/49600139/how-to-change-textfield-underline-color
      SizedBox(height: 20),
      Theme(
        data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
        child: TextField(
          controller: controller,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15.0),
                borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)
              )
            ),
          ),
        ),
      SizedBox(height: 20),
      //改变边框的粗细
      Container(
        padding: const EdgeInsets.all(8.0),
        alignment: Alignment.center,
        height: 60.0,
        decoration: new BoxDecoration(
          color: Colors.blueGrey,
          border: new Border.all(color: Colors.black54, width: 4.0),
          borderRadius: new BorderRadius.circular(12.0)
        ),
        child: new TextFormField(
          controller: controller,
          decoration: InputDecoration.collapsed(hintText: 'hello'),
          ),
        )
    ];
  }

}