Flutter布局构建插件scaffolding的使用

Flutter布局构建插件scaffolding的使用

mason logo

Scaffolding 是一个基于 build_runner 和 mason 的构建工具，用于动态构建 Flutter 应用程序。

package:scaffolding 包含 dynamic_scaffolding 构建器和命令行运行器，用于静态构建（此过程在后台使用了 package:mason_cli）。

截图

home screenshot read screenshot

创建模板

在 /lib/features/contact.dart 中创建一个模板：

// 定义一个抽象类Contact
abstract class Contact {
    String firstname = 'Scott'; // 设置名字为Scott
    String lastname = 'Horn'; // 设置姓氏为Horn
    int age = 21; // 年龄设置为21
    bool favourite = true; // 是否是喜欢的联系人，默认为true
}

安装插件

确保已安装 scaffolding 插件。在终端中运行以下命令：

flutter pub install scaffolding

配置构建

在项目的根目录下的 build.yaml 文件中添加以下配置：

# 在默认目标上启用构建器
targets:
  $default:
    builders:
      scaffolding|dynamicBuilder:
        # 指定生成的文件路径
        generate_for: [lib/features/*.dart]
        enabled: true

运行构建

你可以通过以下命令一次性运行构建：

flutter pub run build_runner build

或者在监听模式下运行：

flutter pub run build_runner watch

调用生成的主函数

在 main.dart 文件中调用生成的主函数：

// 导入生成的scaffold文件
import 'features/contact.scaffold.dart' as scaffold;

void main(List<String> args) {
  // 调用生成的main函数
  scaffold.main(args);
}

更多关于Flutter布局构建插件scaffolding的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter布局构建插件scaffolding的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，Scaffold 是一个非常核心的组件，用于构建应用程序的基本布局结构。它通常包含了 AppBar、BottomNavigationBar、FloatingActionButton 等常见组件，并且提供了一个 body 属性用于放置主要的内容。

下面是一个简单的示例代码，展示了如何使用 Scaffold 来构建一个基本的 Flutter 应用布局：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Scaffold Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scaffold Demo'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Handle FAB press
          print('FAB pressed');
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: 0,
        onTap: (index) {
          // Handle bottom navigation bar tap
          print('Bottom navigation bar tapped: $index');
        },
      ),
    );
  }
}

代码解释：

  1. MaterialApp:

    • MaterialApp 是 Flutter 应用的基础组件，它包含了应用的主题、路由等信息。

  2. Scaffold:

    • Scaffold 组件提供了应用的基本布局结构。
    • appBar：定义了应用的顶部导航栏。
    • body：定义了应用的主要内容区域，这里我们放了一个居中的文本。
    • floatingActionButton：定义了一个悬浮按钮（FAB），通常用于执行主要操作。
    • floatingActionButtonLocation：定义了 FAB 的位置，这里设置为 centerDocked，意味着 FAB 会在底部导航栏上方居中停靠。
    • bottomNavigationBar：定义了一个底部导航栏，包含两个导航项。

  3. BottomNavigationBar:

    • BottomNavigationBar 包含了多个 BottomNavigationBarItem，每个项都有一个图标和标签。
    • currentIndex：当前选中的导航项索引。
    • onTap：点击导航项时的回调函数。

  4. FloatingActionButton:

    • FloatingActionButton 通常用于快速执行主要操作，这里我们设置了一个点击时的回调，只是简单地打印一条消息。

这个示例展示了如何使用 Scaffold 来构建一个包含顶部导航栏、主要内容区、悬浮按钮和底部导航栏的基本布局。你可以根据实际需求进一步扩展和修改这个布局。

回到顶部