Flutter布局扩展插件flutter_extended_wrap的使用

Flutter布局扩展插件flutter_extended_wrap的使用

安装

在 pubspec.yaml 文件中添加以下依赖以从 pub.dev 导入该包：

dependencies:
  flutter_extended_wrap: ^0.0.3

导入

在 Dart 文件中导入该库：

import 'package:flutter_extended_wrap/flutter_extended_wrap.dart';

特性

ExtendedWrap 类允许你自动使默认的 Flutter Wrap 扩展到其父容器的大小，并且可以指定每行应包含多少个子组件。此外，你还可以自定义自由空间的放置位置，例如将子组件放置在 Wrap 的两侧，而自由空间位于中心。

类型

class ExtendedWrap {
  const ExtendedWrap({
    super.key,
    this.direction = Axis.horizontal,
    this.extendedWrapAlignment = ExtendedWrapAlignment.center,
    this.spacing = 0.0,
    this.runSpacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.clipBehavior = Clip.none,
    required this.childSizeInDirection,
    this.expandWrap = true,
    this.desiredChildrenPerRun,
    this.minFreeSpacePerRun = 0.0,
    required this.children,
  });
}

enum ExtendedWrapAlignment {
  start,
  end,
  center,
  spaceBetween,
  spaceAround,
  spaceEvenly,
  spaceCenter,
  spaceCenterOrAlignCenter,
  spaceCenterAndAround
}

使用

你可以在 /example 文件夹中找到如何使用不同配置的扩展 Wrap 的示例，该示例显示了以下内容：

示例代码

以下是使用 flutter_extended_wrap 包的一个完整示例：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_extended_wrap/flutter_extended_wrap.dart';

void main() => runApp(const App());

class CustomScrollBehavior extends MaterialScrollBehavior {
  // 覆盖行为方法和获取器，如拖动设备
  [@override](/user/override)
  Set<PointerDeviceKind> get dragDevices => <PointerDeviceKind>{
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

class App extends StatelessWidget {
  const App({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        scrollBehavior: CustomScrollBehavior(),
        home: Scaffold(body: _buildBody()));
  }

  Widget _buildBody() {
    final ScrollController controller = ScrollController(); // 不要这样做（不良实践）
    return Scrollbar(
      thumbVisibility: true,
      controller: controller,
      child: SingleChildScrollView(
        controller: controller,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: _buildWrapExamples(),
        ),
      ),
    );
  }

  List<Widget> _buildWrapExamples() {
    return <Widget>[
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceCenterOrAlignCenter,
        expandWrap: true,
        children: _createChildren(40, 40, Colors.blue, 8),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceCenterOrAlignCenter,
        expandWrap: true,
        children: _createChildren(40, 40, Colors.red, 7),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceCenter,
        minFreeSpacePerRun: 40,
        expandWrap: true,
        children: _createChildren(40, 40, Colors.green, 8),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceCenter,
        expandWrap: true,
        children: _createChildren(40, 40, Colors.purple, 13),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceCenter,
        expandWrap: true,
        desiredChildrenPerRun: 4,
        children: _createChildren(40, 40, Colors.orange, 8),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.start,
        expandWrap: true,
        desiredChildrenPerRun: 4,
        children: _createChildren(40, 40, Colors.blueGrey, 8),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.end,
        expandWrap: true,
        desiredChildrenPerRun: 6,
        children: _createChildren(40, 40, Colors.cyan, 7),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.center,
        expandWrap: true,
        children: _createChildren(40, 40, Colors.brown, 6),
      ),
      const SizedBox(height: 10),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceAround,
        expandWrap: true,
        desiredChildrenPerRun: 4,
        children: _createChildren(40, 40, Colors.pink, 8),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        runSpacing: 5,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceEvenly,
        expandWrap: true,
        desiredChildrenPerRun: 4,
        children: _createChildren(40, 40, Colors.lime, 8),
      ),
      ExtendedWrap(
        childSizeInDirection: 40,
        spacing: 10,
        runSpacing: 5,
        extendedWrapAlignment: ExtendedWrapAlignment.spaceBetween,
        expandWrap: true,
        desiredChildrenPerRun: 4,
        children: _createChildren(40, 40, Colors.deepOrange, 8),
      ),
    ];
  }

  List<Widget> _createChildren(double width, double height, MaterialColor initialColor, int elementCount) {
    return List<Widget>.generate(elementCount, (int index) {
      return Container(
        width: width,
        height: height,
        color: initialColor[100 * (index % 9 + 1)],
      );
    });
  }
}