Flutter TextField常见用法

在这里插入图片描述
在这里插入图片描述

import 'package:flutter/material.dart';

class TextFieldDemo extends StatefulWidget {
  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField'),
      ),
      body: Column(
        children: <Widget>[
          //基础样式
          TextField(),
          SizedBox(height: 20),
          //默认文子+边框
          TextField(
            decoration: InputDecoration(
                hintText: '请输入搜索内容',
                border: OutlineInputBorder()
            ),
          ),
          SizedBox(height: 20),
          //多行文本框
          TextField(
            maxLines: 3,
            decoration: InputDecoration(
                hintText: '请输入搜索内容',
                border: OutlineInputBorder()
            ),
          ),
          SizedBox(height: 20),
          //密码框
          TextField(
            obscureText: true,
            decoration: InputDecoration(
                hintText: '密码框',
                border: OutlineInputBorder()
            ),
          ),
          SizedBox(height: 20),
          //输入提示
          TextField(
            decoration: InputDecoration(
                labelText: '用户名',
                border: OutlineInputBorder()
            ),
          ),
          SizedBox(height: 20),
          //图标
          TextField(
            decoration: InputDecoration(
               icon:Icon(Icons.person),
               hintText: '用户',
            ),
          ),
        ],
      ),
    );
  }
}

获取表单中输入的值

在这里插入图片描述

import 'package:flutter/material.dart';

class TextFieldDemo extends StatefulWidget {
  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  //初始值
  var _username = new TextEditingController();
  var _password =new TextEditingController();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _username.text = '初始值';
    _password.text='';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextField'),
        ),
        body: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                hintText: '请输入用户名',
              ),
              controller: _username,
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: '密码',
              ),
              controller: _password,
              onChanged: (value){
                print('Changed:'+value);
              },
            ),
            Container(
              width: double.infinity,
              child: RaisedButton(
                child: Text('登录'),
                color: Colors.cyan,
                textColor: Colors.white,
                onPressed: () {
                  print(_username.text);
                  print(_password.text);
                },
              ),
            )
          ],
        ));
  }
}

猜你喜欢

转载自blog.csdn.net/qq_42572245/article/details/106743218