12-flutter Textfield的使用

获取用户的输入用

TextField 或者TextFormField 的实现，通过控制器来实现获取用户的输入。

1 TextField 的属性

const TextField({
  Key key,
  this.controller,
  this.focusNode,// 这个属性可以用来监听输入框是否获取
  this.decoration = const InputDecoration(),
  TextInputType keyboardType,
  this.textInputAction,
  this.textCapitalization = TextCapitalization.none,
  this.style,
  this.textAlign = TextAlign.start,   //类似Text组件
  this.textDirection,   //类似Text组件
  this.autofocus = false,
  this.obscureText = false,// 密文/明文显示
  this.autocorrect = true,
  this.maxLines = 1,
  this.maxLength,
  this.maxLengthEnforced = true,
  this.onChanged,
  this.onEditingComplete,
  this.onSubmitted,
  this.inputFormatters,
  this.enabled,
  this.cursorWidth = 2.0,
  this.cursorRadius,
  this.cursorColor,
  this.keyboardAppearance,
  this.scrollPadding = const EdgeInsets.all(20.0),
  this.enableInteractiveSelection = true,
  this.onTap,
})

2 输入框的样式 InputDecoration

const InputDecoration({
  this.icon,  //输入框前面的图片（在下划线外面）
  this.labelText,  //顶部提示文字（获取焦点之后会移动到输入框上方）
  this.labelStyle,
  this.helperText,  //底部提示文字（不会移动）
  this.helperStyle,
  this.hintText,  //占位文字
  this.hintStyle,
  this.errorText,  //类似helperText
  this.errorStyle,
  this.errorMaxLines,
  this.hasFloatingPlaceholder = true,
  this.isDense,
  this.contentPadding,  //输入内容的边距，默认有一个边距，可以手动设置
  this.prefixIcon, //输入框前面的图片（在下划线里面）
  this.prefix,
  this.prefixText,
  this.prefixStyle,
  this.suffixIcon,  //输入框后面的图片（在下划线里面）
  this.suffix,
  this.suffixText,
  this.suffixStyle,
  this.counterText,
  this.counterStyle,
  this.filled,
  this.fillColor,
  this.errorBorder,
  this.focusedBorder,
  this.focusedErrorBorder,
  this.disabledBorder,
  this.enabledBorder,
  this.border,   //输入框边框线（默认是下划线，也可以是none，也可以是一个框）
  this.enabled = true,
  this.semanticCounterText,
})

3 获取回调

• 如何获取回调的值 第一种方式就是通过onchanged 方式获取，

// 每一次的输入都会调用次方法               
onChanged: (text){
print(text);
}, 

• 第二种就是通过设置控制器来获取。在iOS中就是相当于代理吧。

可以获取输入的值 清空输入的值，设置输入的值

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import 'dart:convert';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyForm(),
      );

  }
}

class MyForm extends StatefulWidget{
    MyForm({Key key}) : super(key:key);
    @override
    _MyFormState createState() =>  _MyFormState();
    
}

class _MyFormState extends State{

    final myVC = TextEditingController();

    // show log
    void showTip(BuildContext context){        
        Scaffold.of(context).showSnackBar(new SnackBar(content: new Text(myVC.text),));
    }

    @override
    void dispose(){
      // 销毁组件的时候 销毁控制器
      myVC.dispose();
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text("Hello World"),),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(children: [
                TextField(
              // 设置vc
              controller: myVC,
              // 提示
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.lock),
                labelText: "手机号码",
                // 提示字体的颜色
                hintStyle: TextStyle(color: Colors.green),
                hintText: "请输入手机号码"), 

              // 每一次的输入都会调用次方法               
              onChanged: (text){
                print(text);
              },  
            ),

            RaisedButton(
              child: Text("我输入了什么东西？？？"),
              onPressed: (){                                              
                print(myVC.text);
                // 清空字体
                myVC.clear();
                // 设置字体
                myVC.text = "OKTOGO";
              },
            ),
            
          ],)
        ),
      );

    }

}