Flutter中的文本输入框组件TextField

越陌度阡

发布于 2021-01-05 12:36:57

4.8K0

发布于 2021-01-05 12:36:57

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

Flutter中的文本输入框使用TextField 这个组件来表示。

主要的属性如下：

1. maxLines 最大输入行。默认为单行输入框，配置此参数后则为多行输入框；

2. onChanged 输入改变触发的事件。可以获取当前输入改变以后的值；

3. obscureText 隐蔽的文本。主要用于密码输入框；

4. controller 文本控制器。当输入框有默认的输入值时就需要用到文本控制器；

5. decoration 装饰器。主要的属性如下：

(1). hintText 占位提示符。类似HTML中的 placeholder；

(2). border 文本边框。默认的输入框为一条下划线，添加此参数后4个边框都会显示；

(3). labelText 输入框label名称；

(4). labelStyle 输入框label的样式；

代码示例：

import 'package:flutter/material.dart';

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

    @override
    Widget build(BuildContext context) {
        return Container(
            child: Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                    children: <Widget>[
                        // 普通输入框
                        TextField(),
                        SizedBox(height:20),
                        // 单行文本输入框
                        TextField(
                            decoration: InputDecoration(
                                hintText: "请输入单行文本",
                                border:OutlineInputBorder()
                            ),
                        ),
                        SizedBox(height:20),
                        // 多行文本输入框
                        TextField(
                            maxLines: 4,
                            decoration:InputDecoration(
                                hintText:"请输入多行文本",
                                border:OutlineInputBorder()
                            ),
                        ),
                        SizedBox(height:10),
                        // 密码输入框
                        TextField(
                            obscureText: true,
                            decoration: InputDecoration(
                                hintText: "请输入密码",
                                border: OutlineInputBorder()
                            ),
                        ),
                        SizedBox(height:10),
                        // 带动态leabel的输入框
                        TextField(
                            obscureText: true,
                            decoration: InputDecoration(
                                labelText: "请输入用户名",
                                border: OutlineInputBorder(),
                            ),
                        ),

                        SizedBox(height:10),
                        // 带动态leabel的密码输入框
                        TextField(
                            obscureText: true,
                            decoration: InputDecoration(
                                labelText: "请输入密码",
                                border: OutlineInputBorder(),
                                labelStyle: TextStyle()
                            ),
                        
                        ),

                        SizedBox(height:10),
                        // 带Icon图标的输入框
                        TextField(
                            decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                icon:Icon(Icons.people),
                                hintText: "请输入用户名"
                            ),
                        ),
                    ],
                ),
            )
        );
    }
}

效果图如下：

给输入框加上默认的值，代码如下：

import 'package:flutter/material.dart';

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

class _TextFieldPageState extends State<TextFieldPage> {

    // 声明控制器(TextEditingController用于要赋初始值时)
    var _username = new TextEditingController();

    // 没有默认赋值的声明方式
    var _password;
    @override
    void initState(){
        super.initState();
        // 赋一个初始值
        _username.text="初始默认值";
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar:AppBar(
                title:Text('表单页面')
            ),
            body:Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                    children: <Widget>[
                        TextField(
                            decoration:InputDecoration(
                                hintText: "请输入用户名"
                            ),
                            // 绑定控制器
                            controller: _username,
                            // 输入改变以后的事件
                            onChanged:(value){
                                setState(() {
                                    this._username.text = value;
                                });
                            },
                        ),
                        SizedBox(height:20),
                        TextField(
                            obscureText: true,
                            decoration:InputDecoration(
                                hintText: "请输入密码"
                            ),
                            // 输入改变以后的事件
                            onChanged:(value){
                                setState(() {
                                    this._password = value;
                                });
                            },
                        ),
                        SizedBox(height:20),
                        Container(
                            // 自适应外层宽度
                            width:double.infinity,
                            child:RaisedButton(
                                child:Text("登录"),
                                // 点击登录
                                onPressed:(){
                                    print(this._username.text);
                                    print(this._password);
                                },
                                color:Colors.red,
                                textColor:Colors.white,
                            )
                        )
                    ],
                )
            )
        );
    }
}

效果图如下：