Flutter UI构建插件easy_ui的使用

Flutter UI构建插件easy_ui的使用

本Flutter插件旨在解决像你这样的开发者可能遇到的懒惰问题。如果你有兴趣了解该插件是如何工作的，可以查看其仓库。

安装

要使用此插件，将其添加到你的pubspec.yaml文件中：

dependencies:
  easy_ui: ^1.0.0

然后运行flutter pub get来安装插件。

使用

添加带有高度为10像素和水平填充16像素的SizedBox

SB().h(10).wpHorv(16)

设置SizedBox为扩展状态

SB().expanded

将SizedBox设置为Sliver状态

SB().sliver

设置SizedBox的点击手势

默认情况下，它是一个Cupertino按钮，当你点击按钮时只会改变透明度。最小尺寸为44像素。

SB().tap(
  () => yourTapCode() // 这里替换为你的点击代码
)

如果你希望忽略最小尺寸，可以添加ignoreminsize参数：

SB().tap(
  () => yourTapCode(), 
  ignoreMinsize: true
)

示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用easy_ui插件：

import 'package:flutter/material.dart';
import 'package:easy_ui/easy_ui.dart'; // 导入easy_ui包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easy UI Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 添加带有高度为10像素和水平填充16像素的SizedBox
              SB().h(10).wpHorv(16),
              
              // 设置SizedBox为扩展状态
              SB().expanded,
              
              // 设置SizedBox为Sliver状态
              SB().sliver,
              
              // 设置SizedBox的点击手势
              SB()
                .tap(
                  () => print("SizedBox被点击了！"), // 替换为你的点击处理逻辑
                )
                .tap(
                  () => print("忽略最小尺寸的点击事件！"), 
                  ignoreMinsize: true
                ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


easy_ui 是一个 Flutter 插件，旨在简化 UI 构建过程，提供了一些预定义的组件和工具，帮助开发者更快速地构建美观的用户界面。以下是如何使用 easy_ui 插件的基本步骤和示例。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  easy_ui: ^latest_version  # 请使用最新的版本号

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

2. 导入包

在你的 Dart 文件中导入 easy_ui：

import 'package:easy_ui/easy_ui.dart';

3. 使用 EasyUI 组件

easy_ui 提供了一些预定义的组件，你可以直接在应用中使用。以下是一些常见的组件示例：

3.1 EasyButton

EasyButton 是一个自定义按钮组件，支持多种样式和属性。

EasyButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Clicked!');
  },
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  borderRadius: 10.0,
)

3.2 EasyText

EasyText 是一个自定义文本组件，支持多种文本样式。

EasyText(
  'Hello, EasyUI!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),
)

3.3 EasyContainer

EasyContainer 是一个自定义容器组件，支持多种装饰和布局属性。

EasyContainer(
  width: 200,
  height: 200,
  color: Colors.green,
  borderRadius: 20.0,
  child: Center(
    child: EasyText(
      'Container',
      style: TextStyle(
        fontSize: 18,
        color: Colors.white,
      ),
    ),
  ),
)

3.4 EasyInput

EasyInput 是一个自定义输入框组件，支持多种输入类型和装饰。

EasyInput(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input changed: $value');
  },
  borderColor: Colors.blue,
  borderRadius: 10.0,
)

4. 使用 EasyUI 工具

easy_ui 还提供了一些工具函数，例如 EasySpacing 用于快速设置间距。

Column(
  children: [
    EasyText('Item 1'),
    EasySpacing(height: 10), // 设置垂直间距
    EasyText('Item 2'),
    EasySpacing(height: 20), // 设置更大的垂直间距
    EasyText('Item 3'),
  ],
)

5. 使用 EasyTheme

EasyTheme 允许你快速设置应用的主题。

MaterialApp(
  theme: EasyTheme.light(), // 使用预定义的亮色主题
  home: MyHomePage(),
)

你还可以自定义主题：

MaterialApp(
  theme: EasyTheme.custom(
    primaryColor: Colors.blue,
    accentColor: Colors.green,
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
  ),
  home: MyHomePage(),
)

6. 完整示例

以下是一个完整的示例，展示如何使用 easy_ui 构建一个简单的 UI：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: EasyTheme.light(),
      home: Scaffold(
        appBar: AppBar(
          title: EasyText('EasyUI Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              EasyText(
                'Welcome to EasyUI',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              EasySpacing(height: 20),
              EasyInput(
                hintText: 'Enter your name',
                onChanged: (value) {
                  print('Input changed: $value');
                },
              ),
              EasySpacing(height: 20),
              EasyButton(
                text: 'Submit',
                onPressed: () {
                  print('Button Clicked!');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部