Flutter布局架构插件scaffold_d的使用

Flutter布局架构插件scaffold_d的使用

scaffold_d 是一个专为Flutter应用程序设计的功能丰富的命令行界面（CLI）工具。

为什么使用scaffold_d

• 简化Flutter应用各部分模板的创建。
• 提供多种模板选项，以满足不同的搭建需求。
• 轻松处理项目结构中的嵌套文件夹和文件。
• 不会增加现有应用的体积。

开始使用

安装

dart pub add scaffold_d

在你的项目根目录下创建 scaffold_d.json 文件，并配置如下：

{
    "template": [
        {
            "templateName": "provider",
            "source": "templates/provider_template",
            "op": "lib/features/auth",
            "identifierMapping": [
                {
                    "name": "_$Provider",
                    "replaceWith": "AuthProvider"
                },
                {
                    "name": "repo",
                    "replaceWith": "AuthRepo"
                }
            ]
        }
    ],
    "extensionMapping": [
        {
            "name": "gg",
            "replaceWith": "dart"
        }
    ]
}

使用方法

在终端运行以下命令：

dart run scaffold_d --template=provider

或者

dart run scaffold_d -t=provider

示例

你可以通过访问 GitHub上的示例 来查看实际应用中的例子。

示例代码

以下是 main.dart 的完整示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你应用的主题。
        //
        // 尝试：运行你的应用（用"flutter run"），你会看到应用有一个紫色的工具栏。然后，不退出应用，
        // 尝试改变颜色方案中的seedColor到Colors.green，然后触发热重载（保存更改或点击IDE中的“热重载”按钮，或在命令行中按"r"）。
        //
        // 注意：计数器没有重置回零；应用的状态在重载时不会丢失。要重置状态，可以使用热重启。
        //
        // 这不仅适用于值，也适用于代码：大多数代码更改可以通过简单的热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的首页。它是有状态的，意味着它有一个包含影响其外观字段的状态对象。
  // 这个类是状态的配置。它保留了从父组件（这里是App小部件）提供的值（在这里是标题），并用于State的构建方法。
  // 在小部件子类中的字段总是标记为"final"。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这个setState调用告诉Flutter框架某些东西已经改变了，这会导致它重新运行下面的构建方法
      // 以便显示更新后的值。如果我们不调用setState()就改变了_counter，那么构建方法就不会再次被调用，
      // 因此看起来什么都不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法。
    //
    // Flutter框架已被优化为使重新运行构建方法快速高效，因此你可以重建任何需要更新的小部件，而不是逐一更改它们。
    return Scaffold(
      appBar: AppBar(
        // 尝试：将这里颜色改为特定颜色（如Colors.amber），并触发热重载来查看AppBar颜色变化，而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从由App.build方法创建的MyHomePage对象中获取值，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其置于父元素的中间。
        child: Column(
          // Column也是一个布局小部件。它接受一个小部件列表并垂直排列它们。
          // 默认情况下，它水平调整自身大小以适应其子元素，并尝试与父元素一样高。
          //
          // Column有各种属性来控制它如何调整自身大小以及如何定位其子元素。这里我们使用mainAxisAlignment来垂直居中子元素；
          // 主轴是垂直的，因为Column是垂直的（交叉轴是水平的）。
          //
          // 尝试：启用“调试绘制”（在IDE中选择“切换调试绘制”操作，或在控制台中按“p”），可以看到每个小部件的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}