第5章MaterialDesign风格组件-TextField文本框组件

最新推荐文章于 2024-08-31 17:01:30 发布

亢少军

最新推荐文章于 2024-08-31 17:01:30 发布

阅读量1.0k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/kangshaojun888/article/details/86637005

版权

Flutter 专栏收录该内容

97 篇文章 16 订阅

订阅专栏

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //添加文本编辑控制器 监听文本输入内容变化
    final TextEditingController controller = TextEditingController();
    controller.addListener(() {
      print('你输入的内容为: ${controller.text}');
    });

    return MaterialApp(
      title: 'TextField组件示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField组件示例'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: TextField(
              //绑定controller
              controller: controller,
              //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
              maxLength: 30,
              //最大行数
              maxLines: 1,
              //是否自动更正
              autocorrect: true,
              //是否自动对焦
              autofocus: true,
              //是否是密码
              obscureText: false,
              //文本对齐方式
              textAlign: TextAlign.center,
              //输入文本的样式
              style: TextStyle(fontSize: 26.0, color: Colors.green),
              //文本内容改变时回调
              onChanged: (text) {
                print('文本内容改变时回调 $text');
              },
              //内容提交时回调
              onSubmitted: (text) {
                print('内容提交时回调 $text');
              },
              enabled: true, //是否禁用
              decoration: InputDecoration(//添加装饰效果
                  fillColor: Colors.grey.shade200,//添加灰色填充色
                  filled: true,
                  helperText: '用户名',
                  prefixIcon: Icon(Icons.person),//左侧图标
                  suffixText: '用户名'),//右侧文本提示
            ),
          ),

        ),
      ),
    );
  }
}