Flutter 中的简单登录表单

本文介绍了在 Flutter 中构建简单的登录表单的步骤和技巧。我们将使用 Flutter 自带的 Widget 和一些其他必要的 Widget，如 TextFormField 和 RaisedButton。

步骤

1. 安装 Flutter

首先需要在计算机上安装 Flutter。Flutter 是一款用于构建高质量、高性能、功能丰富且美观的移动应用程序的开源工具包。安装步骤请参考官方文档。

2. 创建一个新的 Flutter 项目

使用 Flutter CLI 创建一个新的 Flutter 项目。打开终端并运行以下命令：

flutter create my_app
cd my_app

3. 导入必要的依赖项

在新创建的 Flutter 项目中，打开 pubspec.yaml 文件，并添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

Cupertino_icons 是一个图标包，Flutter 提供了 iOS 风格的 Widget，我们使用 cupertino_icons 中的图标来增强页面的样式。

然后运行以下命令，获取并安装依赖项：

flutter pub get

4. 创建表单

使用 flutter/material.dart 中的 Widget 在屏幕上创建一个表单。以下是我们要创建的表单的内容：

• 一个标题
• 一个文本输入框，用于输入用户名
• 一个文本输入框，用于输入密码
• 一个按钮，用于提交表单

在标题旁边添加 Icon 图标，以使此表单更有用。该图标使用 cupertino_icons 包提供的 iOS 风格图标。

import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    CupertinoIcons.person_fill,
                    size: 100.0,
                    color: Colors.grey,
                  ),
                  SizedBox(height: 16.0),
                  Text(
                    'Login Form',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  SizedBox(height: 16.0),
                  TextFormField(
                    controller: _usernameController,
                    decoration: InputDecoration(
                      hintText: 'Username',
                      prefixIcon: Icon(Icons.person_outline),
                    ),
                  ),
                  SizedBox(height: 16.0),
                  TextFormField(
                    controller: _passwordController,
                    obscureText: true,
                    decoration: InputDecoration(
                      hintText: 'Password',
                      prefixIcon: Icon(Icons.lock_outline),
                    ),
                  ),
                  SizedBox(height: 16.0),
                  RaisedButton(
                    child: Text('Login'),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

该 LoginForm 是一个 StatefulWidget，我们使用 TextEditingController 来跟踪文本输入框的值，以便我们可以在提交表单时使用它。

5. 添加登录逻辑

在按下登录按钮时调用一个函数来执行登录操作。以下是实现此操作的示例代码：

class _LoginFormState extends State<LoginForm> {
  ...

  void _login() {
    String username = _usernameController.text;
    String password = _passwordController.text;

    print('Username: $username');
    print('Password: $password');
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    CupertinoIcons.person_fill,
                    size: 100.0,
                    color: Colors.grey,
                  ),
                  SizedBox(height: 16.0),
                  Text(
                    'Login Form',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  SizedBox(height: 16.0),
                  TextFormField(
                    controller: _usernameController,
                    decoration: InputDecoration(
                      hintText: 'Username',
                      prefixIcon: Icon(Icons.person_outline),
                    ),
                  ),
                  SizedBox(height: 16.0),
                  TextFormField(
                    controller: _passwordController,
                    obscureText: true,
                    decoration: InputDecoration(
                      hintText: 'Password',
                      prefixIcon: Icon(Icons.lock_outline),
                    ),
                  ),
                  SizedBox(height: 16.0),
                  RaisedButton(
                    child: Text('Login'),
                    onPressed: _login,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在 _login 函数中，我们从文本输入框中获取用户名和密码，然后打印它们。在实际应用中，应将这些值发送到服务器以进行验证。

结论

恭喜，您已成功创建了一个简单的登录表单并在按下按钮时输入用户名和密码。使用此表单作为起点，可以构建更复杂的用户界面和表单，以满足您的应用程序的需求。

欢迎在评论区分享您的 Flutter 表单构建思路和技巧。