Flutter Day02: Image 与 TextField 组件#

1
import 'dart:typed_data';
2
import 'package:flutter/material.dart';
3

4
class ImageDemoPage extends StatelessWidget {
5
  const ImageDemoPage({super.key, required this.memoryBytes});
6

7
  final Uint8List memoryBytes;
8

9
  @override
10
  Widget build(BuildContext context) {
11
    return Scaffold(
12
      appBar: AppBar(title: const Text('Image Demo')),
13
      body: ListView(
14
        padding: const EdgeInsets.all(16),
15
        children: [
16
          const Text('1) Asset 图片'),
17
          Image.asset(
18
            'assets/images/logo.png',
19
            height: 120,
20
            fit: BoxFit.contain,
21
          ),
22
          const SizedBox(height: 16),
23

24
          const Text('2) 网络图片（带加载中提示和错误兜底）'),
25
          Image.network(
26
            'https://picsum.photos/400/200',
27
            height: 120,
28
            fit: BoxFit.cover,
29
            loadingBuilder: (context, child, progress) {
30
              if (progress == null) return child;
31
              return const SizedBox(
32
                height: 120,
33
                child: Center(child: CircularProgressIndicator()),
34
              );
35
            },
36
            errorBuilder: (context, error, stackTrace) => const SizedBox(
37
              height: 120,
38
              child: Center(child: Text('图片加载失败')),
39
            ),
40
          ),
41
          const SizedBox(height: 16),
42

43
          const Text('3) 内存图片'),
44
          Image.memory(
45
            memoryBytes,
46
            height: 120,
47
            fit: BoxFit.cover,
48
          ),
49
        ],
50
      ),
51
    );
52
  }
53
}

1
import 'package:flutter/material.dart';
2

3
class LoginFormPage extends StatefulWidget {
4
  const LoginFormPage({super.key});
5

6
  @override
7
  State<LoginFormPage> createState() => _LoginFormPageState();
8
}
9

10
class _LoginFormPageState extends State<LoginFormPage> {
11
  final _emailController = TextEditingController();
12
  final _passwordController = TextEditingController();
13
  final _passwordFocus = FocusNode();
14

15
  String? _emailError;
16
  String? _passwordError;
17

18
  @override
19
  void dispose() {
20
    _emailController.dispose();
21
    _passwordController.dispose();
22
    _passwordFocus.dispose();
23
    super.dispose();
24
  }
25

26
  void _submit() {
27
    final email = _emailController.text.trim();
28
    final password = _passwordController.text;
29

30
    setState(() {
31
      _emailError = email.contains('@') ? null : '请输入正确的邮箱';
32
      _passwordError = password.length >= 6 ? null : '密码至少 6 位';
33
    });
34

35
    if (_emailError == null && _passwordError == null) {
36
      ScaffoldMessenger.of(context).showSnackBar(
37
        const SnackBar(content: Text('登录请求已提交')),
38
      );
39
    }
40
  }
41

42
  @override
43
  Widget build(BuildContext context) {
44
    return Scaffold(
45
      appBar: AppBar(title: const Text('TextField Demo')),
46
      body: Padding(
47
        padding: const EdgeInsets.all(16),
48
        child: Column(
49
          children: [
50
            TextField(
51
              controller: _emailController,
52
              keyboardType: TextInputType.emailAddress,
53
              textInputAction: TextInputAction.next,
54
              onSubmitted: (_) => _passwordFocus.requestFocus(),
55
              decoration: InputDecoration(
56
                labelText: '邮箱',
57
                hintText: '请输入邮箱地址',
58
                prefixIcon: const Icon(Icons.email_outlined),
59
                border: const OutlineInputBorder(),
60
                errorText: _emailError,
61
              ),
62
            ),
63
            const SizedBox(height: 12),
64
            TextField(
65
              controller: _passwordController,
66
              focusNode: _passwordFocus,
67
              obscureText: true,
68
              textInputAction: TextInputAction.done,
69
              onSubmitted: (_) => _submit(),
70
              decoration: InputDecoration(
71
                labelText: '密码',
72
                hintText: '请输入密码',
73
                prefixIcon: const Icon(Icons.lock_outline),
74
                border: const OutlineInputBorder(),
75
                errorText: _passwordError,
76
              ),
77
            ),
78
            const SizedBox(height: 16),
79
            SizedBox(
80
              width: double.infinity,
81
              child: FilledButton(
82
                onPressed: _submit,
83
                child: const Text('登录'),
84
              ),
85
            ),
86
          ],
87
        ),
88
      ),
89
    );
90
  }
91
}