Flutter自定义容器插件x_containers的使用

XContainers

XContainers 是一个 Flutter 包，提供更适应性和易于使用的容器小部件。

我最初创建 XContainer（原名 ShadowContainer）是为了拥有一个可定制的带阴影的容器。然后，我实现了其他 XContainers，以便在项目中轻松匹配和统一容器的样式，而无需重复样式代码。

特性

将以下内容添加到你的 Flutter 应用中，可以：

• 拥有更多类型的容器小部件。
• 在应用中统一容器的样式。
• 通过共享主题对象轻松管理该样式。

开始使用

要开始使用，请运行以下命令：

$ flutter pub add x_containers

然后你就可以使用以下导入语句：

import 'package:x_containers/x_containers.dart';

使用方法

此包提供了以下 XContainers，以及一个 xTheme 单例和一个 XLayout 类。所有这些都在下面进行解释。

XContainers

xTheme & XLayout

XContainers 示例

所有 XContainer 都类似于它们的非 X 对应物，但我在顶部级别带来了最常用的属性，这样你就不必每次想要阴影时都编写 BoxDecoration。

// 创建一个 [XContainer]
XContainer(
  padding: EdgeInsets.all(10), // 设置内边距
  height: 100, // 设置高度
  enableShadow: true, // 启用阴影
  child: Text("我有阴影！"), // 子组件
);

// 创建一个 [XInkContainer]
XInkContainer(
  padding: EdgeInsets.all(10), // 设置内边距
  onTap: () => print("我被点击了！"), // 点击事件
  child: Text("点击我！"), // 子组件
);

xTheme 示例

xTheme 有两个作用：

• 成为所有 XContainers 的回退主题，因此你可以在应用开始时设置它，而不是为每个容器编写样式对象。
• 生成 ThemeData 而不必在实例化时设置每个字段（特定字段现在回退到更通用的字段，特别是颜色）。

// 设置 [XContainer] 主题
xTheme.set(
  margin: EdgeInsets.all(0),
  padding: EdgeInsets.all(XLayout.paddingS),
);

// 为深色模式创建主题预设
ThemeData darkMode = xTheme.getTheme(
  mode: ThemeMode.dark,
  primary: Color(0xFF464245),
  secondary: Color(0xFFAF3131),
  background: Color(0xFF282627),
  cardColor: Color(0xFF464245),
  containerColor: Color(0xFF686866),
);

XLayout 示例

XLayout 类存在是因为我在每个项目中倾向于使用四个级别的填充（XS, S, M 和 L），将其嵌入到包中比在每个项目的 globals.dart 中添加它们更容易。它们被嵌入在一个类中，以避免与其他变量冲突。此外，它们都是静态的，所以不需要实例化这个类。最后，如果你更改了一个填充值，其他字段会匹配新的填充值。

// 大填充值
// 相当于 [40]
XLayout.paddingL;

// 大圆角半径
// 相当于 [BorderRadius.circular(paddingL)]
XLayout.brcL;

// 大水平 [SizedBox]
// 相当于 [SizedBox(width: paddingL)]
XLayout.horizontalL;

// 大垂直 [SizedBox]
// 相当于 [SizedBox(height: paddingL)]
XLayout.verticalL;

列表中的破坏性更改

1.2.6

• 移除了 xTheme.getTheme 的大多数参数。更改的原因是该函数的目标是从一组简单的参数提供自定义主题。移除的参数只是自定义主题的覆盖；并且它们可以通过对生成的主题运行 .copyWith 来轻松设置。

1.2.3

• 在 xTheme, XListTile 和 XCard 中用 internalHorizontalPadding 和 internalVerticalPadding 替换了 density 和 densityRatio 属性。

1.2.0

• XSnackbar 不再使用 titleStyle 和 contentStyle 属性，这些属性由文本主题处理。

1.1.0

• 在 XSnackbar 中，字段 message 改名为 content 以与其他类保持一致。
• 在 XCard 中，字段 subtitle 改名为 content 以与其他类保持一致。

其他信息

这是我的第一个包，欢迎检查 GitHub 以获取更多信息，或者提出任何问题，或提供建议！

示例代码

以下是一个简单的示例代码，展示了如何使用 XContainers。

import "package:flutter/material.dart";
import "package:get/get.dart";
import "package:x_containers/x_containers.dart";

import "globals.dart";
import "widgets/widgets.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 设置全局主题共享跨 XContainers
  xTheme.set(
    padding: EdgeInsets.all(XLayout.paddingS),
    paddingValue: XLayout.paddingM,
  );

  runApp(const ExampleApp());
}

/// 一个模拟的应用程序，演示如何使用 XContainers。
class ExampleApp extends StatelessWidget {
  /// 返回一个与给定参数相匹配的 [ExampleApp]。
  const ExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: const Home(),
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.dark,
    );
  }
}

/// 一个简单的标签，列出了几个 XContainers。
class Home extends StatelessWidget {
  // 构造函数 ===============================================================

  /// 返回一个与给定参数相匹配的 [Home] 实例。
  const Home({super.key});

  // 构建方法 ===============================================================

  [@override](/user/override)
  Widget build(BuildContext context) {
    const List<Widget> examples = [
      ExampleContainer(),
      ExampleXContainer(),
      ExampleXInkContainer(),
      ExampleXCard(),
      ExampleXDialog(),
      ExampleXSnackbar(),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text("XContainer: 示例"),
      ),
      body: ListView.separated(
        padding: EdgeInsets.all(XLayout.paddingM),
        shrinkWrap: true,
        itemCount: examples.length,
        itemBuilder: (_, index) => Center(
          child: examples[index],
        ),
        separatorBuilder: (_, __) => XLayout.verticalS,
      ),
    );
  }
}