Flutter UI组件库插件skynexui_components的使用

SkynexUI:

为什么会有另一个组件库？

该库的重点是提供一个通用的“DSL”来跨平台编写UI。无论平台是移动设备还是网页，你都可以基于“文本”（<Text>）和“盒子”（<Box>）来思考UI，并且使用基于网页CSS键值约定的断点来编写样式。

Downloads Current Version Flutter Package NPM Package

⚠️ 在2.0版本之前，我们将对API结构进行重大更改。

入门指南

示例

  • 这是我们正在开发的主要示例，一个包含React用于网页和Flutter用于移动开发的项目。

如何使用？

如何安装？

  • flutter:
    flutter pub add skynexui_components
  • yarn:
    yarn add [@skynexui](/user/skynexui)/components
  • npm:
    npm install [@skynexui](/user/skynexui)/components

开发模式

React (Web)

  • 使用文件夹 examples/demo_base 模拟真实项目结构。
  • 此设置具有 build:watch 模式
    # 第一个终端窗口
yarn install && yarn build:watch

# 第二个终端窗口
yarn dev:demo_base

Flutter (其他平台)

  • 在VSCode中打开 examples/demo_base/lib/main.dart 文件，然后运行它。

贡献者

  • 目前项目还不适合贡献，如果你发现了一个错误，请在这里提交一个问题，让我们讨论如何实现它 😋。

支持者

  • 信任此项目的公司：
    Companies that trust in this project

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SkynexUI 组件库示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 Box 组件创建一个容器
              Box(
                padding: EdgeInsets.all(20),
                margin: EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text(
                  'Hello, SkynexUI!',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
              SizedBox(height: 20), // 添加间距
              // 使用 Button 组件创建一个按钮
              Button(
                onPressed: () {
                  print('Button clicked!');
                },
                child: Text('点击我'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter UI组件库插件skynexui_components的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


skynexui_components 是一个为 Flutter 提供的 UI 组件库插件，旨在帮助开发者快速构建美观且功能丰富的用户界面。该插件提供了一系列预先设计好的 UI 组件和布局工具，可以显著减少开发时间和提高代码的复用性。

使用步骤

  1. 添加依赖： 首先，在你的 pubspec.yaml 文件中添加 skynexui_components 依赖。

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

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

  2. 导入包： 在使用 skynexui_components 的地方，导入该包。

    import 'package:skynexui_components/skynexui_components.dart';

  3. 使用组件： skynexui_components 提供了多种 UI 组件，以下是一些常见的组件使用示例。

    • 按钮：

      SkynexButton(
  onPressed: () {
    print('Button Pressed');
  },
  text: 'Click Me',
  color: Colors.blue,
);

    • 输入框：

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

    • 卡片：

      SkynexCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a card component'),
    ],
  ),
);

    • 导航栏：

      SkynexAppBar(
  title: 'My App',
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        print('Search');
      },
    ),
  ],
);

  4. 自定义主题： skynexui_components 支持自定义主题，你可以通过 SkynexTheme 来设置全局的样式。

    void main() {
  runApp(
    MaterialApp(
      theme: SkynexTheme(
        primaryColor: Colors.blue,
        accentColor: Colors.green,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16, color: Colors.black),
          headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ).data,
      home: MyHomePage(),
    ),
  );
}

示例应用

以下是一个简单的示例应用，展示了如何使用 skynexui_components 中的一些组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: SkynexTheme(
        primaryColor: Colors.blue,
        accentColor: Colors.green,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16, color: Colors.black),
          headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ).data,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SkynexAppBar(
        title: 'SkynexUI Example',
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('Search');
            },
          ),
        ],
      ),
      body: Center(
        child: SkynexCard(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Welcome to SkynexUI'),
              SizedBox(height: 20),
              SkynexButton(
                onPressed: () {
                  print('Button Pressed');
                },
                text: 'Click Me',
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部