Flutter容器简化插件easy_container的使用

📂️ Table of Contents

• 📷 Screenshots
• ✨ Features
• ❓ Usage
• 🎯 Sample Usage

📸 Screenshots

Sample Containers	On Pressed Animation

✨ Features

• Gesture Detectors: Built-in support for onTap, onLongPress, and more.
• Custom Padding & Margin: Use shorthand for all sides or specify custom insets.
• Border Customization: Toggle borders with custom color, width, and style.
• Elevation Support: Add elevation to create shadows and a raised effect.
• Simple & Lightweight: Minimal configuration with powerful customization.

❓ Usage

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter

  easy_container:

2. 使用 EasyContainer 替代普通 Container 或 Card

import 'package:easy_container/easy_container.dart';

EasyContainer(
  child: Text("Hello World"),
),

3. 使用手势检测器

如果需要添加点击或长按事件，可以使用 onTap、onLongPress 等参数：

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
),

4. 自定义 padding、margin 和 borderRadius

• padding 可以直接传入一个 double 值，表示所有边的填充。
• 如果需要自定义填充，可以使用 customPadding 参数，它接受 EdgeInsets。

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
  
  // Shorthand for EdgeInsets.all(20)
  padding: 20,

  // if customPadding passed, padding is ignored.
  // Hence padding applied to container is 10 from all sides.
  customPadding: EdgeInsets.all(10),
),

5. 设置对齐方式

默认情况下，alignment 是居中的。可以通过设置 alignment 为 null 或指定高度和宽度来改变这一行为：

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),

  // child not longer takes all the available space
  alignment: null,
),

6. 启用边框

要启用边框，需要将 showBorder 设置为 true，默认值为 false。如果启用了边框，还可以设置 borderColor、borderWidth 和 borderStyle：

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
  showBorder: true,
  borderWidth: 5,
  borderColor: Colors.red,
),

🎯 Sample Usage

下面是一个完整的示例代码，展示了如何使用 EasyContainer 创建一个带有点击事件、阴影和圆角的容器：

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

void main() => runApp(_MainApp());

class _MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Center(
            child: EasyContainer(
              height: 300,
              width: 300,
              padding: 20,
              elevation: 10,
              onTap: () => debugPrint("Container Tapped"),
              margin: 20,
              borderRadius: 20,
              color: Colors.red,
              child: const CircularProgressIndicator.adaptive(),
            ),
          ),
        ),
      ),
    );
  }
}

这个示例创建了一个红色的容器，大小为 300x300，带有 20 的内边距和外边距，圆角半径为 20，并且有 10 的阴影效果。点击容器时会打印 “Container Tapped”。

希望这些信息能帮助你更好地理解和使用 easy_container 插件！如果有任何问题，欢迎随时提问。