Flutter开发 13.Widget-TextField、Flex、Expanded、SafeArea

Flutter开发 13.Widget-TextField、Expanded、SafeArea

目录 1. TextField2. Flex和Expanded3. SafeArea4.实例演示

1. TextField

TextField用于文本输入，它提供了很多属性.

参数名	类型	说明
controller	TextEditingController	输入框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。
focusNode	FocusNode?	用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄（handle）.
decoration	InputDecoration?	用于控制TextField的外观显示，如提示文本、背景颜色、边框等。
keyboardType	TextInputType?	当前输入框可输入的键盘类型，有很多的预置的枚举值可以用。text 文本输入键盘number 数字；会d出数字键盘; phone 电话号码输入键盘; datetime日期输入键盘；streetAddress街道地址; 等等
autofocus	bool	是否自动获取焦点
textCapitalization	TextCapitalization	characters 默认为每个字符使用大写键盘;sentence 默认为每个句子的第一个字母使用大写键盘;word 默认为每个单词的第一个字母使用大写键盘;none 默认使用小写
style	TextStyle?	输入文本的样式
textAlign	TextAlign	输入框内编辑文本在水平方向的对齐方式
obscureText	bool	是否隐藏正在编辑的文本，如用于输入密码的场景等，默认文本内容会用“•”替换。
obscuringCharacter	String	obscureText开启隐藏文本后，输入的字符,用该字段指定的字符来替代.
maxLines	int?	输入框的最大行数，默认为1；如果为null，则无行数限制。
maxLength	int?	输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数.
maxLengthEnforcement	MaxLengthEnforcement?	当输入文本长度超过maxLength时如何处理，如截断、超出等
toolbarOptions	ToolbarOptions?	长按或鼠标右击时出现的菜单，包括 copy、cut、paste 以及 selectAll。
onChange	ValueChanged< String >?	输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听。
onEditingComplete	VoidCallback?	输入框输入完成时触发，比如按了键盘的完成键.
onSubmitted	ValueChanged< String >?	输入框输入完成时触发，比如按了键盘的完成键
inputFormatters	List< TextInputFormatter >?	用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。
enable	bool	如果为false，则输入框会被禁用，禁用状态不接收输入和事件

2. Flex和Expanded

引用官方的文档说明:
Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现d性布局。

Flex({
  ...
  required this.direction, //d性布局的方向, Row默认为水平方向，Column默认为垂直方向
  List<Widget> children = const <Widget>[],
})

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中实现了其布局算法。

Expanded 只能作为 Flex 的孩子（否则会报错），它可以按比例“扩伸”Flex子组件所占用的空间。因为 Row和Column 都继承自 Flex，所以 Expanded 也可以作为它们的孩子。

3. SafeArea

对于各种 刘海屏、IOS底部黑线 这种可能会超出有效范围的展示情况，将其放到SafeArea组件中，可以避免这种情况发生。

4.实例演示

在当前测试工程目录下的lib目录下新建文件夹pages，然后新建一个Login.dart文件。
打开Login.dart文件编辑内容如下:

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final TextEditingController _textEditingControllerForName =
      TextEditingController();
  final TextEditingController _textEditingControllerForPwd =
      TextEditingController();

  @override
  void initState() {
    _textEditingControllerForName.addListener(() {
      //可以监听输入变化
    });
    super.initState();
  }

//登录按钮的点击事件
  void onClickLogin() {
    AlertDialog alertDialog = AlertDialog(
      title: const Text("登录按钮"),
      content: Text("用户名:" +
          _textEditingControllerForName.text +
          "; " +
          "密码:" +
          _textEditingControllerForPwd.text),
    );

    //显示一下已经输入的用户名和密码
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return alertDialog;
        });
  }

//注册按钮的点击事件
  void onClickRegist() {}

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
        child: Column(children: [
          TextField(
            autofocus: true,
            keyboardType: TextInputType.text,
            controller: _textEditingControllerForName,
            decoration: const InputDecoration(
                labelText: "用户名",
                hintText: "输入手机号或邮箱地址",
                prefixIcon: Icon(Icons.person)),
          ),
          TextField(
            autofocus: false,
            toolbarOptions: const ToolbarOptions(
                copy: false,
                cut: false,
                paste: false,
                selectAll: false), //不允许拷贝和粘贴
            obscureText: true, //隐藏输入字符
            obscuringCharacter: "#", //密码字符
            controller: _textEditingControllerForPwd,
            decoration: const InputDecoration(
                labelText: "密码",
                hintText: "输入登录密码",
                prefixIcon: Icon(Icons.lock)),
          ),
          Container(
            margin: const EdgeInsets.only(top: 30),
            height: 40,
            width: double.infinity,
            child: ElevatedButton(
              onPressed: onClickLogin,
              child: const Text("登录"),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 10),
            height: 40,
            width: double.infinity,
            child: OutlinedButton(
              style: OutlinedButton.styleFrom(
                  side: const BorderSide(
                width: 2,
                color: Color.fromARGB(255, 0, 195, 255),
              )),
              onPressed: onClickRegist,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Icon(
                    Icons.app_registration,
                    color: Color.fromARGB(255, 0, 195, 255),
                  ),
                  Text(
                    "注册新账户",
                    style: TextStyle(
                      color: Color.fromARGB(255, 0, 195, 255),
                    ),
                  )
                ],
              ),
            ),
          ),
          const Expanded(flex: 1, child: SizedBox()),
          const Text(
            "Copyright: 爪爪课堂",
            style: TextStyle(
              color: Color.fromARGB(255, 138, 138, 138),
            ),
          )
        ]),
      ),
    );
  }
}

在修改main.dart文件

import 'package:first_flutter_demo/pages/Login.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text("登录"),
          ),
          body: const Login())));
}

运行看一下效果：

当前例子中、如果我们不使用SafeArea底部的"Copyright: 爪爪课堂" 就会显示到黑线下边：

当我们输入密码时：

点击一下登录按钮，看一下我们取到的信息：