flutter 表单

TextField (Input)

InputDecoration

属性

属性	描述
labelText	设置 Label标题
icon	设置 label Icon!
prefixIcon	设置文本框前缀Icon!
suffixIcon	设置文本框后缀Icon!
hintText	设置文本框Placeholder!
border	设置文本框 border属性 InputBorder.none or OutlineInputBorder()
filled	设置文本框灰色背景! true
fillColor	自定义文本框背景颜色 Colors

事件

事件名	描述
onChange	当输入value的时候触发!
onSubmit	当确认按钮的时候触发!

TextFieldController

用来控制文本框输入行为 controller:

1. 设置init值!
2. addListener 对输入文本监听!

final textFieldController = TextEditingController()

Demo

textField

TextField

import 'package:flutter/material.dart';

class MyFormDemo extends StatefulWidget {
  const MyFormDemo({super.key});

  @override
  State<MyFormDemo> createState() => _MyFormDemoState();
}

class _MyFormDemoState extends State<MyFormDemo> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).highlightColor,
      padding: const EdgeInsets.all(15),
      child: TextFieldWidget(),
    );
  }
}


// 文本框
class TextFieldWidget extends StatefulWidget {
  const TextFieldWidget({super.key});

  @override
  State<TextFieldWidget> createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  final textFieldController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    textFieldController.text = 'initValue!';

    textFieldController.addListener(() {
      debugPrint('this is addlistener ${textFieldController.text}')
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    // 清除 controller 避免消耗资源
    textFieldController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textFieldController,
      // 输入值的时候 会触发
      onChanged: (value) {
        debugPrint('value changed: $value');
      },
      // 点击确定按钮的时候会触发
      onSubmitted: (value) {
        debugPrint('value is confirm: $value');
      },
      decoration: const InputDecoration(
        // label: Text('please input~'),
        // 设置 Label
        labelText: '用户名',
        // 设置 Label Icon
        icon: Icon(Icons.date_range),
        // 设置后缀 Icon
        suffixIcon: Icon(Icons.abc),
        // 设置前缀 Icon
        prefixIcon: Icon(Icons.abc_rounded),
        // placeholder 提示
        hintText: '请输入用户名',
        // 去掉边框
        // border: InputBorder.none
        // 四周边框
        border: OutlineInputBorder(),
        // 设置灰色背景值
        filled: true,
        // 自定义颜色背景
        // fillColor: Colors.lime
      )
    );
  }
}

Form 表单

formWidget

// Form
class FormWidgetDemo extends StatefulWidget {
  const FormWidgetDemo({super.key});

  @override
  State<FormWidgetDemo> createState() => _FormWidgetDemoState();
}

class _FormWidgetDemoState extends State<FormWidgetDemo> {

  final formGlobalKey = GlobalKey<FormState>();
  //  稍后赋值
  late String username, password;

  void _submitFormData(){
    // !断言 currentState 可能 为空
    formGlobalKey.currentState!.save();
    formGlobalKey.currentState!.validate();
    if ( formGlobalKey.currentState!.validate() ) {
      Get.snackbar("提示", "登录成功!");
      debugPrint('用户名： $username');
      debugPrint('密码 $password');

    } else {
      // const SnackBar(content: Text('用户名密码错误!'));
      Get.snackbar(
        "提示", 
        "用户名密码不正确!",
        // backgroundColor: Colors.red,
        colorText: Colors.red

      );
    }

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(15),
      child: Form(
        key: formGlobalKey,
        // 设置自动校验模式，disabled 只有 点击的时候才会校验，默认状态下不校验
        autovalidateMode: AutovalidateMode.disabled,
        child: Column(
        // 设置主轴居中
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              decoration: const InputDecoration(
                labelText: '用户名',
                hintText: '请输入用户名!',
                prefixIcon:  Icon(Icons.people),
                border: OutlineInputBorder()
              ),
              // 保存数据到 username 变量
              onSaved: (newValue) {
                username = newValue!;
              },
              validator: (value){
                  if( value!.isEmpty ) {
                    return '用户名是必填项!';
                  }
                  return null;
              },
              // 自动校验模式
              // autovalidateMode: AutovalidateMode.always,
            ),
            const SizedBox(height: 15,),
            TextFormField(
              // 设置输入的文字隐藏
              obscureText: true,
              decoration: const InputDecoration(
                labelText: '密码',
                hintText: '请输入密码!',
                prefixIcon:  Icon(Icons.password),
                border: OutlineInputBorder()
              ),
              // 保存数据到 password 变量
              onSaved: (newValue) {
                password = newValue!;
              },
              // 校验
              validator: (value){
                  if( value!.isEmpty ) {
                    return '密码是必填项!';
                  }
                  return null;
              },
              // 自动校验模式
              // autovalidateMode: AutovalidateMode.always,
            ),
            const SizedBox(height: 25,),
            Container(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _submitFormData,
                child: const Text('登录', style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w200),),
              ),
            )
          ],
        )
      )
    );
  }
}