1
return Scaffold(
2
  body: Center(                          // body 是页面主体
3
    child: Container(
4
      width: 400,                        // 固定宽度的登录卡片
5
      padding: const EdgeInsets.all(32),
6
      child: Column(
7
        mainAxisSize: MainAxisSize.min,   // 高度由内容决定
8
        crossAxisAlignment: CrossAxisAlignment.stretch,  // 宽度撑满
9
        children: [
10
          Text('欢迎回到 Lumi-Hub', /* ... */),
11
          const SizedBox(height: 32),
12
          TextField(/* 用户名 */),
13
          const SizedBox(height: 16),
14
          TextField(/* 密码 */),
15
          const SizedBox(height: 24),
16
          ElevatedButton(/* 登录按钮 */),
17
        ],
18
      ),
19
    ),
20
  ),
21
);

1
┌──────────────────────────────┐
2
│          AppBar              │  ← appBar
3
├──────────────────────────────┤
4
│                              │
5
│                              │
6
│           body               │  ← body
7
│                              │
8
│                              │
9
│                      [FAB]   │  ← floatingActionButton
10
├──────────────────────────────┤
11
│     BottomNavigationBar      │  ← bottomNavigationBar
12
└──────────────────────────────┘
13
         ┌────────┐
14
         │ Drawer │               ← drawer（从左滑出）
15
         │        │
16
         └────────┘

1
Padding(
2
  padding: const EdgeInsets.all(32),            // 四周 32
3
  child: Column(/* ... */),
4
)
5

6
Padding(
7
  padding: const EdgeInsets.symmetric(
8
    horizontal: 10,                            // 左右 10
9
    vertical: 8,                               // 上下 8
10
  ),
11
  child: Text('内容'),
12
)
13

14
Padding(
15
  padding: const EdgeInsets.fromLTRB(12, 8, 12, 0),  // 左上右下分别指定
16
  child: Text('精确控制'),
17
)
18

19
Padding(
20
  padding: const EdgeInsets.only(top: 16),     // 只有上方有间距
21
  child: Text('特定方向'),
22
)

1
BoxDecoration(
2
  color: Colors.blue,                        // 纯色背景
3
  gradient: LinearGradient(                  // 渐变背景
4
    colors: [Colors.blue, Colors.purple],
5
  ),
6
  borderRadius: BorderRadius.circular(12),    // 圆角
7
  border: Border.all(                        // 边框
8
    color: Colors.grey,
9
    width: 1,
10
  ),
11
  boxShadow: [                              // 阴影
12
    BoxShadow(
13
      color: Colors.black26,
14
      blurRadius: 8,
15
      offset: Offset(0, 4),
16
    ),
17
  ],
18
)

1
// 填充按钮（最醒目）
2
ElevatedButton(
3
  onPressed: isConnected ? _submit : null,  // ← null = 禁用状态
4
  style: ElevatedButton.styleFrom(
5
    padding: const EdgeInsets.symmetric(vertical: 16),
6
  ),
7
  child: Text('登录'),
8
)
9

10
// 填充按钮（Material 3 推荐）
11
FilledButton(
12
  onPressed: () => Navigator.of(context).pop(result),
13
  child: const Text('直接退出'),
14
)
15

16
// 文字按钮
17
TextButton(
18
  onPressed: () {
19
    setState(() { _isLoginMode = !_isLoginMode; });
20
  },
21
  child: Text('没有账号？点击注册'),
22
)
23

24
// 图标按钮
25
IconButton(
26
  onPressed: _clearAttachmentState,
27
  icon: Icon(Icons.close_rounded, color: colors.subtext, size: 16),
28
  splashRadius: 14,
29
  padding: EdgeInsets.zero,
30
  constraints: const BoxConstraints(minWidth: 24, minHeight: 24),
31
)

1
// ListView.builder —— 懒加载（只渲染可见项，适合长列表）
2
ListView.builder(
3
  controller: _scroll,
4
  itemCount: messages.length,
5
  itemBuilder: (context, index) {
6
    return MessageBubble(message: messages[index]);
7
  },
8
)
9

10
// ListView —— 直接传 children（适合短列表）
11
ListView(
12
  children: [
13
    ListTile(title: Text('设置项 1')),
14
    ListTile(title: Text('设置项 2')),
15
    ListTile(title: Text('设置项 3')),
16
  ],
17
)

1
final _scroll = ScrollController();
2

3
// 跳到底部
4
_scroll.jumpTo(_scroll.position.maxScrollExtent);
5

6
// 滚动到底部（带动画）
7
_scroll.animateTo(
8
  _scroll.position.maxScrollExtent,
9
  duration: Duration(milliseconds: 300),
10
  curve: Curves.easeOut,
11
);
12

13
// 监听滚动位置
14
_scroll.addListener(() {
15
  final nearBottom = (_scroll.position.maxScrollExtent - _scroll.position.pixels) < 80;
16
  if (nearBottom) {
17
    // 接近底部
18
  }
19
});
20

21
// dispose 中销毁
22
_scroll.dispose();

1
Column(
2
  children: [
3
    Text('标题'),
4

5
    // 条件 Widget（collection if）
6
    if (_pendingFileName != null)
7
      Padding(
8
        padding: const EdgeInsets.fromLTRB(12, 8, 12, 0),
9
        child: Text(_pendingFileName!),
10
      ),
11

12
    // 条件 + else
13
    if (_isUploadingAttachment)
14
      LinearProgressIndicator(value: _uploadProgress)
15
    else
16
      Text(_uploadError != null ? '失败' : '上传完成'),
17

18
    // 条件状态提示
19
    if (wsService.status != WsStatus.connected)
20
      const Text('正在连接服务器...', style: TextStyle(color: Colors.red)),
21
  ],
22
)

1
// ✅ collection if：Widget 存在或不存在
2
Column(
3
  children: [
4
    if (isError) Text('错误'),     // isError=false 时完全不渲染
5
  ],
6
)
7

8
// ✅ 三元表达式：总有一个 Widget，选哪个
9
Text(isLoginMode ? '登录' : '注册')  // 总会有文字
10

11
// ❌ 三元解 null：可读性差
12
Column(
13
  children: [
14
    isError ? Text('错误') : SizedBox.shrink(),  // 不如 if 清晰
15
  ],
16
)

1
@override
2
Widget build(BuildContext context) {
3
  final screenWidth = MediaQuery.of(context).size.width;
4
  final isCompact = screenWidth < 920;     // ← 窗口宽度决定布局模式
5

6
  if (isCompact) {
7
    // 窄屏：侧边栏变成 Drawer（抽屉）
8
    return Scaffold(
9
      drawer: Drawer(child: _Sidebar(/* ... */)),    // ← 滑出式
10
      body: chatMain,
11
    );
12
  } else {
13
    // 宽屏：侧边栏常驻
14
    return Row(
15
      children: [
16
        SizedBox(
17
          width: 260,
18
          child: _Sidebar(/* ... */),                 // ← 固定展示
19
        ),
20
        VerticalDivider(width: 1),
21
        Expanded(child: chatMain),                    // ← 聊天区域
22
      ],
23
    );
24
  }
25
}

1
showDialog<WindowCloseAction>(
2
  context: context,
3
  builder: (context) {
4
    return AlertDialog(
5
      title: const Text('关闭 Lumi Hub'),
6
      content: const Text('最小化到托盘还是直接退出？'),
7
      actions: [
8
        TextButton(
9
          onPressed: () => Navigator.of(context).pop(WindowCloseAction.minimize),
10
          child: const Text('最小化到托盘'),
11
        ),
12
        FilledButton(
13
          onPressed: () => Navigator.of(context).pop(WindowCloseAction.exit),
14
          child: const Text('直接退出'),
15
        ),
16
      ],
17
    );
18
  },
19
);

1
showDialog(
2
  context: context,
3
  builder: (context) {
4
    return StatefulBuilder(
5
      //     ^^^^^^^^^^^^^^^^  ← Dialog 内部有自己的 setState
6
      builder: (context, setDialogState) {
7
        return AlertDialog(
8
          content: Column(
9
            mainAxisSize: MainAxisSize.min,
10
            children: [
11
              CheckboxListTile(
12
                title: const Text('记住本次选择'),
13
                value: rememberChoice,
14
                onChanged: (value) {
15
                  setDialogState(() {           // ← 用 setDialogState，不是 setState
16
                    rememberChoice = value ?? false;
17
                  });
18
                },
19
              ),
20
            ],
21
          ),
22
        );
23
      },
24
    );
25
  },
26
);