你的第一个文本输入框

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 22 课，共 34 课。

TextField 是一个可以输入内容的框。在预览中点击它，然后用键盘输入。

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
)

decoration: 用于设置输入框的外观。labelText 用于为输入框命名：它会显示在空输入框内，开始输入后会移到边框上，这样名称就会一直显示。OutlineInputBorder() 会绘制完整的边框；不使用它时，文本下方只有一条线。

还有 hintText，它会显示灰色示例文字，例如 you@example.com，但你一开始输入，它就会消失。用标签为输入框命名，只把提示文字作为补充。

输入框会沿着分配给它的宽度延伸。这里的 Column 位于 Padding 内，因此不会紧贴屏幕边缘。

挑战

简单

在标题下方，添加一个 16 的 SizedBox，然后添加一个标记为 Email、四周都有边框的 TextField。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Create your account', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}