flutter架构项目基础

2026-09-04 15:22:20 +08:00
parent 70967229d0
commit 0c5aee59c0
265 changed files with 35484 additions and 0 deletions
@@ -0,0 +1,96 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+/// ============================================================
+/// TextField 输入框演示页（登录表单）
+///
+/// 一、两种使用方式：
+///   1. 直接运行本页面：runApp(const MaterialApp(home: InputDemoPage()))
+///   2. 复制 body 核心代码到任意 Scaffold 的 body 中。
+///
+/// 二、核心知识点：
+///   1. TextEditingController 管理输入框内容，读取用 controller.text；
+///   2. 控制器必须在 dispose() 里释放，否则内存泄漏；
+///   3. obscureText 控制密码明文/密文（配合 setState 做"眼睛"切换）；
+///   4. 注意：Scaffold 没有 padding 参数！外层间距要用 body 里的 Padding。
+/// ============================================================
+class InputDemoPage extends StatefulWidget {
+  const InputDemoPage({super.key});
+
+  @override
+  State<InputDemoPage> createState() => _InputDemoPageState();
+}
+
+class _InputDemoPageState extends State<InputDemoPage> {
+  // 控制器：负责管理输入框内容
+  final TextEditingController _userCtrl = TextEditingController();
+  final TextEditingController _pwdCtrl = TextEditingController();
+  // 密码是否明文显示（默认密文）
+  bool _showPwd = false;
+
+  @override
+  void dispose() {
+    // 释放控制器，防止内存泄漏
+    _userCtrl.dispose();
+    _pwdCtrl.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('TextField 登录表单 Demo')),
+      body: Padding(
+        // Scaffold 没有 padding 参数，间距写在 body 的 Padding 上
+        padding: EdgeInsets.all(20.w),
+        child: Column(
+          children: [
+            TextField(
+              controller: _userCtrl,
+              keyboardType: TextInputType.phone, // 弹数字键盘
+              decoration: const InputDecoration(
+                labelText: "手机号",
+                hintText: "请输入11位手机号",
+                prefixIcon: Icon(Icons.phone),
+                border: OutlineInputBorder(),
+              ),
+            ),
+            SizedBox(height: 16.h),
+            TextField(
+              controller: _pwdCtrl,
+              obscureText: !_showPwd, // 密文/明文由状态决定
+              decoration: InputDecoration(
+                labelText: "密码",
+                hintText: "请输入密码",
+                prefixIcon: const Icon(Icons.lock),
+                border: const OutlineInputBorder(),
+                // suffixIcon：右侧小眼睛，点击切换明文
+                suffixIcon: IconButton(
+                  icon: Icon(_showPwd ? Icons.visibility : Icons.visibility_off),
+                  onPressed: () {
+                    setState(() {
+                      _showPwd = !_showPwd; // 修改状态触发重建
+                    });
+                  },
+                ),
+              ),
+            ),
+            SizedBox(height: 24.h),
+            ElevatedButton(
+              onPressed: () {
+                // 获取输入内容
+                String user = _userCtrl.text;
+                String pwd = _pwdCtrl.text;
+                if (kDebugMode) {
+                  print("账号:$user，密码11:$pwd");
+                }
+              },
+              child: const Text("登录"),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}