Flutter布局设计插件schematics的使用

Flutter布局设计插件schematics的使用

Schematics 📐

一个可定制且响应式的Flutter小部件，用于创建和展示图表。

版本 星星 关注者

问题 许可证

目录

功能

  • 2D图表/地图：允许你创建和展示2D图表、地图和楼层平面图。可以添加入口和开口，这些可以是直线开口或弧线开口。
  • 2D网格地图：提供一个网格，图表在此网格上绘制，指定图表上的区域。
  • 直线开口：可以添加到块中的简单直线开口。
  • 弧线开口：可以是半圆形、扇形或四分之一圆的弯曲开口。

使用

要使用Schema小部件创建和展示图表，你需要理解以下概念：

  1. Schema：Schema小部件是所有用于图表的小部件的基础。它接受一个SchemaConfiguration对象作为参数。
  2. Schema配置：SchemaConfiguration对象包含诸如大小、轴比例初始化和其他配置等属性。
  3. 块：Schema小部件接受一个Block对象列表。每个Block具有高度、宽度、边框、围栏边框、标签、标签样式、位置和描边宽度等属性。
  4. 块布局：Schema小部件还接受一个onBlockLayout回调，返回表示图表中所有块区域的BlockArea对象列表。
  5. 网格更新：Schema小部件还接受一个onGridUpdate回调，返回更新后的网格，并突出显示不同的位置。
  6. onBlockAreaTap：Schema小部件的onBlockAreaTap回调返回被点击的块区域及其本地和全局位置。

示例

import 'package:flutter/material.dart';
import 'package:schematics/schematics.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Schematics 示例')),
        body: Schema(
          config: SchemaConfiguration(
            size: SchemaSize(cell: kDefaultSchemaSize.cell, opening: 25),
            initiateAxesScale: (constraints) => 
                AxesScale(
                  x: 1,
                  y: 1,
                  opening: 1,
                ),
            // 其他属性
          ),
          blocks: [
            Block(
              height: 100,
              width: 100,
              border: Border.all(color: Colors.black),
              fenceBorder: FenceBorder.all,
              label: 'Block 1',
              labelStyle: TextStyle(color: Colors.black),
              position: Offset(50, 50),
              strokeWidth: 2.0,
            ),
            // 其他块
          ],
          onBlockLayout: (blocks) {
            // 在此执行操作
          },
          onGridUpdate: (grid) {
            // 处理网格更新
          },
          onBlockAreaTap: (blockAreaTapEvent) {
            // 处理块区域点击
          },
        ),
      ),
    );
  }
}

查看示例项目 这里。

注意

对于更多实际应用示例，请查看2024年拉各斯开发者大会应用程序 这里。

安装

在你的pubspec.yaml文件中添加schematics作为依赖项：

dependencies:
  schematics: ^最新版本

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

1 回复

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


在Flutter开发中，schematics 并不是一个官方认可的布局设计插件。通常，当我们谈论Flutter的布局设计时，我们会使用Flutter提供的各种布局小部件（widgets），如 Column, Row, Stack, GridView, ListView, 以及更多高级布局小部件如 Flexible, Expanded, Spacer 等。

不过，如果你指的是一种用于生成Flutter代码布局的工具或库（尽管它不是广泛认知的schematics），我们可以探讨一些自动化代码生成的工具和技巧，这些在Flutter社区中确实存在，尽管它们可能不是直接名为schematics。

一个常见的自动化代码生成工具是 json_serializable，它用于自动生成JSON序列化和反序列化的代码，但这与布局设计不直接相关。对于布局设计，虽然没有直接对应schematics的插件，但我们可以利用Flutter的内置功能和第三方库来创建动态和可复用的布局。

以下是一个使用Flutter内置布局小部件创建简单布局的示例代码：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Layout Design'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Header',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Row(
              children: <Widget>[
                Icon(Icons.star, color: Colors.amber),
                SizedBox(width: 8),
                Text('Rated 4.5 out of 5'),
              ],
            ),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Icon(Icons.label),
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们使用了 Column 和 Row 来创建垂直和水平的布局，Expanded 和 ListView.builder 用于创建可滚动的列表。这些布局小部件是Flutter布局设计的核心。

如果你确实在寻找一个特定的代码生成工具或库来帮助设计Flutter布局，我建议你查看Flutter社区中的一些流行工具和库，如 flutter_launcher_icons（用于生成应用图标），或者探索一些IDE插件，这些插件可能提供了一些布局生成的功能，尽管它们通常不会像Angular Schematics那样在Angular社区中那么普遍。

希望这能帮到你！如果你有更具体的需求或问题，请随时提出。

回到顶部