iridescent-dawn-8057

readme.md

iridescent-dawn-8057

Created with <3 with dartpad.dev.

main.dart

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: LoginForm(), // 使用我们自定义的 LoginForm
      ),
    );
  }
}

// 这是一个 StatefulWidget，代表了登录表单
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

// 这是 LoginForm 的状态
class _LoginFormState extends State<LoginForm> {
  final _usernameController = TextEditingController(); // 控制用户名输入
  final _passwordController = TextEditingController(); // 控制密码输入
  String _loginMessage = ''; // 用于显示登录消息

  // 这是模拟登录的函数
  void _login() {
    // 这里是模拟的 API 调用
    Future.delayed(Duration(seconds: 2)).then((_) {
      setState(() {
        _loginMessage = '登录成功！'; // 更新登录消息
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          TextField(
            controller: _usernameController,
            decoration: InputDecoration(
              labelText: '用户名', // 设置标签
            ),
          ),
          TextField(
            controller: _passwordController,
            decoration: InputDecoration(
              labelText: '密码', // 设置标签
            ),
            obscureText: true, // 隐藏输入的密码
          ),
          ElevatedButton(
            child: Text('登录'),
            onPressed: _login, // 当按钮被按下时，调用 _login 函数
          ),
          Text(_loginMessage), // 显示登录消息
        ],
      ),
    );
  }
}