Flutter布局插件advanced_column_row的使用

AdvancedColumnRow 是一个 Flutter 包，通过添加自定义选项（如填充、间隔小部件、装饰、对齐和其他灵活属性）来改进默认的 Column 和 Row 小部件。该包帮助你在 Flutter 中构建更具视觉吸引力且更灵活的布局。

功能

• 改进后的 <strong>Column</strong> 和 <strong>Row</strong> 小部件。
• <strong>Padding</strong> 可以控制整个小部件周围的间距。
• <strong>Gap widgets</strong> 可以控制子元素之间的间距。
• <strong>Decoration</strong> 选项，如背景颜色和边框。
• <strong>Alignment</strong> 设置可以控制子小部件的位置。

还有很多其他功能。

安装

在你的 <code>pubspec.yaml</code> 文件中添加以下依赖项：

dependencies:
  advanced_column_row: ^1.0.0

然后运行：

flutter pub get

使用

要使用该包，在 Dart 文件中导入它：

import 'package:advanced_column_row/advanced_column_row.dart';

当然！下面是 <strong>示例</strong> 部分，分别展示了 <code>AdvancedColumn</code> 和 <code>AdvancedRow</code> 的示例。

示例

以下是 <code>AdvancedColumn</code> 和 <code>AdvancedRow</code> 的基本示例：

AdvancedColumn 示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Advanced Column Example')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: AdvancedColumn(
            padding: const EdgeInsets.all(16),
            gapWidget: const SizedBox(height: 10),
            decoration: BoxDecoration(
              color: Colors.lightBlue[50],
              borderRadius: BorderRadius.circular(8),
            ),
            alignment: Alignment.center,
            children: const [
              Text('Advanced Column - Child 1'),
              Text('Advanced Column - Child 2'),
            ],
          ),
        ),
      ),
    );
  }
}

这将渲染一个带有两个文本子元素、间距为 10 像素且具有背景颜色和填充的 <code>AdvancedColumn</code>。

AdvancedRow 示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Advanced Row Example')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: AdvancedRow(
            padding: const EdgeInsets.all(16),
            gapWidget: const SizedBox(width: 10),
            decoration: BoxDecoration(
              color: Colors.lightGreen[50],
              borderRadius: BorderRadius.circular(8),
            ),
            alignment: Alignment.center,
            children: const [
              Text('Advanced Row - Child 1'),
              Text('Advanced Row - Child 2'),
            ],
          ),
        ),
      ),
    );
  }
}

这将渲染一个带有两个子元素、间距为 10 像素且具有背景颜色和填充的 <code>AdvancedRow</code>。

高级演示

API 参考

AdvancedColumn

AdvancedColumn 是一个可定制的小部件，继承自 Column 并提供了额外的属性，允许你配置布局、填充、装饰和对齐选项。

构造函数：

const AdvancedColumn({
  Key? key,
  AlignmentGeometry? alignment,
  EdgeInsetsGeometry? padding,
  Decoration? decoration,
  Decoration? foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  EdgeInsetsGeometry? margin,
  Matrix4? transform,
  AlignmentGeometry? transformAlignment,
  List<Widget> children = const [],
  Clip clipBehavior = Clip.none,
  Widget gapWidget = const SizedBox(height: 0, width: 0),
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
})

属性：

• <code>alignment</code>: 在可用空间内对齐列。
• <code>padding</code>: 在列内的内容周围添加填充。
• <code>decoration</code>: 应用背景装饰到列上，如颜色或边框。
• <code>foregroundDecoration</code>: 在列的内容上添加前景装饰。
• <code>width</code> 和 <code>height</code>: 设置列的尺寸。
• <code>constraints</code>: 指定列大小的额外约束。
• <code>margin</code>: 设置列外的空间。
• <code>transform</code> 和 <code>transformAlignment</code>: 对列应用变换（例如缩放、旋转），并控制对齐方式。
• <code>children</code>: 显示为列内容的列表。
• <code>clipBehavior</code>: 确定当内容溢出时列应如何剪裁其内容。
• <code>gapWidget</code>: 在每个子元素之间添加可自定义的间隙小部件（不包括最顶部和最底部）。
• <code>mainAxisAlignment</code>: 控制沿主（垂直）轴的子元素对齐。
• <code>mainAxisSize</code>: 定义列应占用多少垂直空间。
• <code>crossAxisAlignment</code>: 设置沿交叉（水平）轴的子元素对齐。
• <code>textDirection</code>: 指定文本方向，影响子小部件的布局。
• <code>verticalDirection</code>: 从上到下或反之排列子元素。
• <code>textBaseline</code>: 沿基线对齐文本，用于与 <code>crossAxisAlignment</code> 结合使用。

AdvancedRow

AdvancedRow 类似于 Row，但增加了增强的布局、填充、装饰和间距自定义功能。

构造函数：

const AdvancedRow({
  Key? key,
  AlignmentGeometry? alignment,
  EdgeInsetsGeometry? padding,
  Decoration? decoration,
  Decoration? foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  EdgeInsetsGeometry? margin,
  Matrix4? transform,
  AlignmentGeometry? transformAlignment,
  List<Widget> children = const [],
  Clip clipBehavior = Clip.none,
  Widget gapWidget = const SizedBox(height: 0, width: 0),
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
})

属性：

• <code>alignment</code>: 在容器内对齐行的内容。
• <code>padding</code>: 在行的内部内容周围添加填充。
• <code>decoration</code>: 应用背景装饰到行上，如颜色或边框。
• <code>foregroundDecoration</code>: 在行的内容上添加前景装饰。
• <code>width</code> 和 <code>height</code>: 定义行的尺寸。
• <code>constraints</code>: 添加额外的约束以控制行的尺寸。
• <code>margin</code>: 设置行外的空间。
• <code>transform</code> 和 <code>transformAlignment</code>: 对行应用变换（例如旋转、缩放），并控制对齐方式。
• <code>children</code>: 显示在行内的小部件。
• <code>clipBehavior</code>: 控制行在其溢出时如何剪裁其内容。
• <code>gapWidget</code>: 在行中的每个子元素之间添加可自定义的间隙小部件（不包括最外层的元素）。
• <code>mainAxisAlignment</code>: 沿主（水平）轴对齐子元素。
• <code>mainAxisSize</code>: 确定行应占用多少水平空间。
• <code>crossAxisAlignment</code>: 控制沿交叉（垂直）轴的对齐方式。
• <code>textDirection</code>: 指定文本方向，影响子小部件的布局。
• <code>verticalDirection</code>: 在行内从上到下或反之排列子元素。
• <code>textBaseline</code>: 沿基线对齐文本，特别是与 <code>crossAxisAlignment</code> 结合使用时。

每个属性都允许你精确调整 <code>AdvancedColumn</code> 和 <code>AdvancedRow</code> 的布局和外观，使其更容易根据复杂的 UI 要求进行定制。

高级用法

使用 <code>gapWidget</code> 进行自定义间距

<code>gapWidget</code> 属性提供了灵活性，可以在子元素之间添加任何类型的组件（通常是 <code>SizedBox</code>）以创建一致的间距。你也可以使用自定义组件在子元素之间分离它们，具有独特的设计。

AdvancedColumn(
  gapWidget: const Divider(color: Colors.blue), // 在子元素之间添加一个 Divider
  children: const [
    Text('Advanced Column Item 1'),
    Text('Advanced Column Item 2'),
  ],
)

使用 <code>decoration</code> 进行样式设置

<code>decoration</code> 属性允许你添加各种样式，如边框、阴影或渐变，使得创建视觉吸引人的布局更加容易。

AdvancedRow(
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.grey),
    boxShadow: [BoxShadow(blurRadius: 5, color: Colors.black26)],
  ),
  children: const [
    Text('Styled Row Item 1'),
    Text('Styled Row Item 2'),
  ],
)