flutter 边用边学之"表单"

2019-06-16

虽然下周还有几门考试，但是我就是不复习，我就是要敲代码🤪。

对我这个一手javascript走遍天的frontender来说，flutter的学习是真的挺艰难的，并非是dart语言难学，而是它的面向对象思想难以融入（js毕竟是更函数式编程的），以及flutter这个框架涉及的内容太多，像我这没接触过原生android或ios开发的人，在没大量教程指引的情况下是寸步难行哇。

俺学习flutter目的很单纯简单：一是学个新语言找找新鲜感，二是希望能开发些简单的app，调用web开发调用不了的一些手机原生能力，that's all。

本篇主要记录一下我在flutter中使用表单组件时的一些内容。这是一篇笔记性质的文章，所以内容不会很详细甚至会觉得毫无看点🤣。先上代码：

class _DetectScreenState extends State<DetectScreen> {
  int minutes;
  int hours;
  TextEditingController minutesInputController = TextEditingController();
  TextEditingController hoursInputController = TextEditingController();
  @override
  void initState() {
    super.initState();
    minutesInputController.addListener(() {
      print('minutes ${minutesInputController.text}');
    });
    hoursInputController.addListener(() {
      print('hours ${hoursInputController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                width: 100,
                child: TextField(
                  controller: minutesInputController
                ),
              ),
              Text("分"),
              Flexible(
                child: TextField(
                  controller: hoursInputController,
                ),
              ),
              Text('时')
            ],
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    minutesInputController.dispose();
    hoursInputController.dispose();
  }
}

笔记如下：

当TextField组件和Row搭配时，需要把TextField用Expanded或Flexible或其它可设置宽度的组件包裹起来，否则会报错"BoxConstraints forces an infinite width..."的错，原因就是TextField没有固定的度，当用在Row里时，Row组件无法决定它的空间分配，所以必须要知道它的空间占据，所以需要使用Expanded或Flexible组件，或者是Container组件并指定宽度值（该问题可详见此 stackoverflow）。
TextField的常用属性（这里才是开发最悲惨的地方，组件的很多属性都不知道怎么设置，只能不停地狗狗）：

onChange: 监听输入变化
controller: 一个TextEditingController实例，使用控制器可对输入框有更多的控制空间

decoration: 一个InputDecoration实例：

TextField(
  decoration: InputDecoration(
    // 添加占位符
    hintText: '分钟',
    // 添加边框
    border: OutlineInputBorder(borderSide: BorderSide(color: Colors.pink))
  )
)

keyboardType: 设置键盘类型，值可为TextInputType.number、TextInputType.phone等。

参考

再难也要努力哇！

Home