or

flutter边用边学之"表单"

2019年6月16日
虽然下周还有几门考试,但是我就是不复习,我就是要敲代码🤪。

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

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


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

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

  
  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('时')
            ],
          ),
        ],
      ),
    );
  }

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

笔记如下:

  1. TextField组件和Row搭配时,需要把TextFieldExpandedFlexible或其它可设置宽度的组件包裹起来,否则会报错"BoxConstraints forces an infinite width..."的错,原因就是TextField没有固定的度,当用在Row里时,Row组件无法决定它的空间分配,所以必须要知道它的空间占据,所以需要使用ExpandedFlexible组件,或者是Container组件并指定宽度值(该问题可详见此 stackoverflow)。

  2. TextField的常用属性(这里才是开发最悲惨的地方,组件的很多属性都不知道怎么设置,只能不停地狗狗):

  • onChange: 监听输入变化
  • controller: 一个TextEditingController实例,使用控制器可对输入框有更多的控制空间
  • decoration: 一个InputDecoration实例:
    TextField(
      decoration: InputDecoration(
        // 添加占位符
        hintText: '分钟',
        // 添加边框
        border: OutlineInputBorder(borderSide: BorderSide(color: Colors.pink))
      )
    )
  • keyboardType: 设置键盘类型,值可为TextInputType.numberTextInputType.phone等。

参考

  1. https://flutter.dev/docs/cookbook#forms
  2. https://flutterbyexample.com/forms-1-user-input/
再难也要努力哇!
or