Flutter TextField常见用法

最新推荐文章于 2024-08-21 09:38:44 发布

神也会困

最新推荐文章于 2024-08-21 09:38:44 发布

阅读量533

点赞数 1

分类专栏： Flutter 文章标签： Flutter TextField

本文链接：https://blog.csdn.net/qq_42572245/article/details/106743218

版权

Flutter 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

本文介绍了一个使用Flutter框架创建TextField组件的实例，展示了不同样式的文本输入框，包括基础样式、带边框和提示文本的单行输入框、多行文本框、密码框以及带有图标的输入框，并演示了如何获取表单中的输入值。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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);
                },
              ),
            )
          ],
        ));
  }
}