页面生成

使用 flu-cli add page 命令生成页面文件和对应的 ViewModel。

基本用法

flu-cli add page <name> [options]
flu-cli a page <name> [options]

参数

参数	说明
--stateful	创建 StatefulWidget（默认 StatelessWidget）
--no-vm	不生成 ViewModel
-f, --feature	所属功能模块

StatelessWidget vs StatefulWidget

StatelessWidget（默认）

适合无状态页面：

• 静态内容展示
• 数据由 ViewModel 管理
• 简单的 UI 组件

flu-cli a page home

生成的代码：

import 'package:flutter/material.dart';
import '../viewmodels/home_viewmodel.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final viewModel = HomeViewModel();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: const Center(
        child: Text('Home Page'),
      ),
    );
  }
}

StatefulWidget

适合有状态页面：

• 需要管理本地状态
• 有动画效果
• 需要生命周期管理

flu-cli a page home --stateful

生成的代码：

import 'package:flutter/material.dart';
import '../viewmodels/home_viewmodel.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final HomeViewModel _viewModel;

  @override
  void initState() {
    super.initState();
    _viewModel = HomeViewModel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: const Center(
        child: Text('Home Page'),
      ),
    );
  }

  @override
  void dispose() {
    _viewModel.dispose();
    super.dispose();
  }
}

生成位置

Lite 模板

lib/
├── pages/
│   └── home_page.dart
└── viewmodels/
    └── home_viewmodel.dart

Modular/Clean 模板

lib/features/user/
├── pages/
│   └── user_list_page.dart
└── viewmodels/
    └── user_list_viewmodel.dart

示例

创建基础页面

flu-cli a page home

创建 StatefulWidget 页面

flu-cli a page profile --stateful

不生成 ViewModel

flu-cli a page about --no-vm

在功能模块中创建

flu-cli a page user_list -f user
flu-cli a page product_detail -f shop --stateful

最佳实践

1. 命名规范: 使用 snake_case，如 user_list
2. 功能模块: 相关页面放在同一模块
3. ViewModel: 除非特别简单，否则都生成 ViewModel
4. StatefulWidget: 只在需要本地状态时使用

下一步

• 📖 查看 ViewModel 生成
• 🔧 学习片段驱动生成
• 💡 查看代码生成最佳实践