Nasajon Human Interface Design System (NHIDS)

欢迎来到Nasajon的设计系统库。

🚧 在建设中 🚧

该插件正处于开发阶段。很快，我们将提供更多详细的信息和文档，以帮助您在Flutter项目中更方便地集成和使用它。

Nasajon | 研究与发展 - 架构

示例代码

以下是一个简单的示例，展示如何在Flutter项目中使用nsj_design_system插件：

import 'package:flutter/material.dart';
import 'package:nsj_design_system/nsj_design_system.dart'; // 假设插件名为 nsj_design_system

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NsJ Design System 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NsjDesignSystemExample(),
    );
  }
}

class NsjDesignSystemExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NsJ 设计系统 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 NsjButton（假设按钮组件为 NsjButton）
            NsjButton(
              text: '点击我', // 按钮文字
              onPressed: () {
                print('按钮被点击了！'); // 按钮点击事件
              },
            ),
            SizedBox(height: 20), // 添加间距
            // 使用 NsjTextField（假设输入框组件为 NsjTextField）
            NsjTextField(
              hintText: '请输入...', // 提示文字
              onChanged: (value) {
                print('输入的内容: $value'); // 输入框内容变化时的回调
              },
            ),
          ],
        ),
      ),
    );
  }
}

说明

导入插件：

import 'package:nsj_design_system/nsj_design_system.dart';

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

vueper 1楼•6 天前

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

nsj_design_system 是一个用于 Flutter 的设计系统插件，旨在帮助开发者快速构建一致且美观的用户界面。以下是如何使用 nsj_design_system 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 nsj_design_system 依赖：

dependencies:
  flutter:
    sdk: flutter
  nsj_design_system: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 nsj_design_system：

import 'package:nsj_design_system/nsj_design_system.dart';

3. 使用设计系统组件

nsj_design_system 提供了多种预定义的组件和样式，你可以直接在应用中使用它们。以下是一些常见组件的使用示例：

按钮

NSJButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Pressed');
  },
)

文本

NSJText(
  'Hello, World!',
  style: NSJTextStyle.headline1,
)

卡片

NSJCard(
  child: Column(
    children: [
      NSJText('Card Title', style: NSJTextStyle.headline2),
      NSJText('This is a card content.', style: NSJTextStyle.body1),
    ],
  ),
)

输入框

NSJTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input: $value');
  },
)

4. 自定义主题

nsj_design_system 允许你自定义主题以适应你的品牌风格。你可以在 MaterialApp 中设置自定义主题：

MaterialApp(
  theme: NSJThemeData.light().copyWith(
    primaryColor: Colors.blue,
    accentColor: Colors.orange,
  ),
  home: MyHomePage(),
)

5. 使用图标

nsj_design_system 还提供了一套图标，你可以直接使用：

NSJIcon(NSJIcons.home)

6. 响应式布局

nsj_design_system 支持响应式布局，你可以使用 NSJResponsiveBuilder 来根据屏幕大小调整布局：

NSJResponsiveBuilder(
  builder: (context, screenSize) {
    if (screenSize == NSJScreenSize.small) {
      return NSJText('Small Screen');
    } else if (screenSize == NSJScreenSize.medium) {
      return NSJText('Medium Screen');
    } else {
      return NSJText('Large Screen');
    }
  },
)

7. 其他组件

nsj_design_system 还提供了许多其他组件，如 NSJAppBar、NSJBottomNavigationBar、NSJDialog 等，你可以根据需要使用它们。

8. 示例代码

以下是一个简单的示例，展示了如何使用 nsj_design_system 构建一个基本的 Flutter 应用：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: NSJThemeData.light(),
      home: Scaffold(
        appBar: NSJAppBar(
          title: NSJText('NSJ Design System Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              NSJText('Hello, World!', style: NSJTextStyle.headline1),
              SizedBox(height: 20),
              NSJButton(
                text: 'Click Me',
                onPressed: () {
                  print('Button Pressed');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}