【自学Flutter】6.1 输入框的使用

最新推荐文章于 2025-07-20 16:47:09 发布

原创最新推荐文章于 2025-07-20 16:47:09 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文详细介绍了在Flutter中如何使用TextField组件创建输入框，包括自动获取焦点、设置输入框样式、添加图标和提示文本等功能，适用于创建用户名和密码输入界面。

6.1 输入框的使用

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    autofocus: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.perm_identity),
                      labelText: "用户名",
                      hintText: "请输入用户名",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.lock),
                      labelText: "密码",
                      hintText: "请输入密码",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                ],
              ),
            )
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
				  //输入框
                  TextField(
                    //自动获取焦点
                    autofocus: true,
                    //输入框修饰
                    decoration: InputDecoration(
                      //前置Icon
                      prefixIcon:Icon(Icons.perm_identity),
                      //输入框文本
                      labelText: "用户名",
                      //输入框提示文本
                      hintText: "请输入用户名",
                      //输入框提示文本样式
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  TextField(
                    //输入文本不可见，用于输入密码 以····表示
                    obscureText: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.lock),
                      labelText: "密码",
                      hintText: "请输入密码",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                ],
              ),
            )
        )
    );
  }
}

3.效果图

效果图