6. Flutter - 基础组件 之TextField

TextField用于接收用户的文本输入，属性介绍。
常见的属性：

• keyboardType：键盘的类型，
• style：设置样式，
• textAlign：文本对齐方式，
• maxLength：最大显示行数
• decoration：用于设置输入框相关的样式
• icon：设置左边显示的图标
• labelText：在输入框上面显示一个提示的文本
• hintText：显示提示的占位文字
• border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
• filled：是否填充输入框，默认为false
• fillColor：输入框填充的颜色
• controller：绑定的控制器，可以使用它设置文本的初始值，也可以使用它来监听文本的改变
• onChanged：监听输入框内容的改变，传入一个回调函数
• onSubmitted：点击键盘中右下角的down时，会回调的一个函数

代码示例:

import 'package:flutter/material.dart';

main(List args) {
  // imageCache : 图片缓存类
  // imageCache.clear();
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('基本部件 - TextField'),
      ),
      body: Center(
        child: TextFieldDemo(),
      ),
    ),
  ));
}

class TextFieldDemo extends StatefulWidget {
  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State {
  final nameC = TextEditingController();
  final passwordC = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //姓名
        UserNameField(nameC),
        //密码
        PasswordField(passwordC),
        //登录
        Container(
          width: 180,
          height: 44,
          child: TextButton(
            style: ButtonStyle(
              textStyle: MaterialStateProperty.all(TextStyle()),
              backgroundColor:
                  MaterialStateColor.resolveWith((states) => Colors.red),
            ),
            onPressed: () {
              print('commit ${nameC.text}-${passwordC.text}');
            },
            child: Text('登录'),
          ),
        )
      ],
    );
    ;
  }
}

// ignore: must_be_immutable
class UserNameField extends StatelessWidget {
  TextEditingController userNameController;

  UserNameField(TextEditingController controller) {
    userNameController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(18),
      child: TextField(
        controller: userNameController,
        decoration: InputDecoration(
          labelText: '姓名',
          hintText: '请输入',
          hintStyle: TextStyle(color: Colors.green),
          icon: Icon(Icons.people),
          border: OutlineInputBorder(
              borderSide: BorderSide(
                  color: Colors.red, width: 0.1, style: BorderStyle.none)),
          filled: true,
          fillColor: Colors.lightGreen[50], // 需设置filled为true才可生效
          hoverColor: Colors.red,
        ),
        onChanged: (value) {
          print('姓名: $value');
        },
        onSubmitted: (value) {
          print('姓名提交: $value');
        },
      ),
    );
  }
}

// ignore: must_be_immutable
class PasswordField extends StatelessWidget {
  TextEditingController passwordController;

  PasswordField(TextEditingController controller) {
    passwordController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(18),
      child: TextField(
        controller: passwordController,
        decoration: InputDecoration(
          labelText: '密码',
          hintText: '请输入',
          hintStyle: TextStyle(color: Colors.green),
          icon: Icon(Icons.lock),
          border: OutlineInputBorder(
              borderSide: BorderSide(
                  color: Colors.red, width: 0.1, style: BorderStyle.none)),
          filled: true,
          fillColor: Colors.lightGreen[50], // 需设置filled为true才可生效
          hoverColor: Colors.red,
        ),
        onChanged: (value) {
          print('密码: $value');
        },
        onSubmitted: (value) {
          print('密码提交: $value');
        },
      ),
    );
  }
}

效果图.png