Flutter——最详细(TextField)使用教程

TextField简介

文本输入框，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。

使用场景：

搜索框，输入账号密码等

InputDecoration属性

label 属性效果图

icon 属性效果图

常用于左侧图标展示

border 属性效果图

输入框边框

hintText 属性效果图

未点击时文案提示

counter 属性效果图

helperText 属性效果图

prefixIcon 属性效果图

suffixIcon 属性效果图

整合部分属性代码块与效果图

TextField(
                controller: _controller,
                style: const TextStyle(color: Colors.blue),
                decoration: const InputDecoration(
                  label: Text("标签label"),
                  icon: Icon(Icons.favorite),
                  iconColor: Colors.black,
                  border: OutlineInputBorder(),
                  hintText: "提示文本hintText",
                  hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
                  contentPadding: EdgeInsets.all(2),
                  counter: Text("提示文本counter"),
                  helperText: "帮助文本helperText",
                  prefixIcon: Icon(Icons.arrow_left),
                  suffixIcon: Icon(Icons.arrow_right),
                  suffix: Text('suffix'),
                ),
                onEditingComplete: () {
                  print('onEditingComplete');
                },
                onChanged: (v) {
                  print('onChanged:' + v);
                },
                onSubmitted: (v) {
                  FocusScope.of(context).requestFocus(_focusNode);
                  print('onSubmitted:' + v);
                  _controller.clear();
                },
              )