[Day10] Flutter - 文字输入元件 ( TextField )

前言

Hi, 我是鱼板伯爵今天要教大家 TextField 这个元件，这可以让使用者用键盘输入文字，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

TextField 元件，常用属性

• controller：TextField控制元件可以取得相关属性
• keyboardType：键盘的型态TextInputType.text(文字)、TextInputType.text(数字)
• maxLines：最大行数
• onChanged：当输入有变更时会调用

class DeomBaseTextField extends StatelessWidget {
  const DeomBaseTextField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextEditingController myController = new TextEditingController();
    return Column(
      children: [
        TextField(
          controller: myController,
          keyboardType: TextInputType.text,
          maxLines: 4,
          onChanged: (String value) {
            log("${value}");
          },
        ),
        ElevatedButton(
          child: Text('送出'),
          onPressed: () {
            log("${myController.text}");
          },
        ),
      ],
    );
  }
}

TextField : decoration 客制化风格

• contentPadding: 文字间距
• hintText: 文字输入框内提示的字
• hintStyle: 文字输入框内提示字的风格
• filled: 是否使用背景颜色
• fillColor: 背景颜色
• helperText: 文字输入框外的提示字
• prefixIcon: 左边文字输入框的图示
• suffixIcon: 右边文字输入框的图示
• enabledBorder: 未点击时外框颜色
• focusedBorder: 点即时外框颜色
• border:外框颜色

InputDecoration(
      isDense: true,
      contentPadding: EdgeInsets.only(left: 15, top: 12, bottom: 12),
      hintText: hintText,
      hintStyle: TextStyle(
        color: Colors.redAccent,
      ),
      filled: true,
      fillColor: Colors.tealAccent,
      helperText: helperText,
      prefixIcon: Icon(Icons.ac_unit),
      suffixIcon: Icon(Icons.cabin_rounded),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.amber,
          width: 1,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.blueAccent,
          width: 1,
        ),
      ),
      border: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.limeAccent,
          width: 1,
        ),
      ),
    );