Flutter TextField UI 实例 —— 新手礼包

以下是一个简单的Flutter TextField UI实例，用于展示如何创建一个登录表单的用户名输入框：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('登录'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  labelText: '用户名',
                  hintText: '请输入用户名',
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 20.0), // 空间
              TextField(
                decoration: InputDecoration(
                  labelText: '密码',
                  hintText: '请输入密码',
                  border: OutlineInputBorder(),
                ),
                obscureText: true, // 密码字段
              ),
              // 登录按钮
              SizedBox(height: 20.0),
              RaisedButton(
                child: Text('登录'),
                onPressed: () {
                  // 登录逻辑
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个带有用户名和密码输入框的登录表单，并有一个登录按钮。用户名输入框使用TextField来接收用户输入，并通过InputDecoration来设置提示文本和边框样式。密码输入框也是一个TextField，但是设置了obscureText: true属性来保护用户的密码不被看到。登录按钮是一个RaisedButton，当按下时，会触发登录逻辑。