Flutter插件easy_box的使用方法

Easy Box

Easy Box 是一个包含所有基本小部件属性的单一小部件。它根据请求的属性组织小部件树。只需使用 Box 组织一切。

Flutter插件easy_box的特性

• 背景
• 填充和边距
• 按钮
• 边框
• 列表
• 大小
• 形状
• 对齐方式
• 变换
• 文本样式

<code>Button</code> 是一个 InkWell + GestureDetector 的组合。

开始使用Flutter插件easy_box

安装插件：

flutter pub add easy_box

导入包：

import 'package:easy_box/easy_box.dart';

使用方法

将你的小部件包装在需要的元素中，Box 小部件会处理其余部分。你也可以不使用任何内部小部件。

Box(
  child: ... ,
)

或者，使用 children 列表或 itemBuilder 包装一组小部件。这将是一个 ListView 或 Column/Row，具体取决于是否设置了 alignment 属性。

alignment 属性用于对齐，因为对齐只能通过 Column/Row 实现。另一种方法是使用 Box.column() 和 Box.row()。

Box(
  children: [ ... ],

  direction: Axis.horizontal,
  alignment: Alignment.center,
  spacing: Spacing.spaceAround
)

选择你的 Box 样式和属性，它将根据已请求的元素创建所需的结构。

Box(
  width: 200,
  height: 300,

  backgroundColor: Colors.green,
  backgroundGradient: LinearGradient( ... ),
  backgroundImage: DecorationImage( ... ),

  border: Border.all( ... ),
  borderRadius: BorderRadius.circular(10),

  shape: ... ,

  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10)
)

进行快速的 <strong>transform</strong> 操作，使用 translate、scale 和 rotate：

Box(
  translate: Offset( ... ),
  scale: 1.5,
  rotate: math.pi / 4
)

为 Box 中的所有文本小部件选择默认文本样式：

Box(
  textStyle: TextStyle(
    ...
  )
)

添加按钮功能，如 InkWell 或 GestureDetector：

Box(
  splashColor: ... ,
  highlightColor: ... ,
  hoverColor: ... ,
  
  // 以上所有功能
  buttonColor: ... ,

  onTap: () => ... ,
  onLongPress: () => ... ,
  onDoubleTap: () => ... ,
)

示例代码

以下是一个简单的示例，展示了如何使用 Easy Box 插件。

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

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: Box(
      padding: EdgeInsets.all(10),
      backgroundColor: Colors.green,
      alignment: Alignment.center,
      child: Text('测试'),
      textStyle: TextStyle(
        fontSize: 20,
        color: Colors.white,
      ),
    ),
  )));
}