Flutter布局优化插件spacious

Flutter布局优化插件spacious_widgets的使用

Getting started（开始使用）

访问此库在 pub.dev

添加依赖：

dependencies:  
  spacious_widgets: ^1.1.0+3

Features（特性）

单个扩展函数可以在任何 List 中的每个小部件之间自动插入 SizedBox
可以调整任何一个插入的 SizedBox
可以忽略任何地方的 SizedBox
不会在 Spacer 小部件周围插入 SizedBox

Usage（使用方法）

List<Widget> setSpace({double? start, double? height, double? width, double? end});

通常我们在每个小部件之间使用 SizedBox 来增加间距。

Column(  
  children: [
    Text("A"),
    SizedBox(height: 10),
    Text("B"),
    SizedBox(height: 10),
    Text("C"),
    SizedBox(height: 10),
    Text("D"),
    SizedBox(height: 10),
    Text("E"),
  ],
)

当列表变大时，这种方法会变得非常繁琐。对于 n 个小部件，我们需要插入 n-1 个 SizedBox，如果需要在开头和结尾也增加间距，则需要插入 n+1 个 SizedBox。

通过这个库，SizedBox 会被自动插入，因此实际的列表不会被 SizedBox 混乱。

Column(  
  children: [
    Text("A"),
    Text("B"),
    Text("C"),
    Text("D"),
    Text("E"),
  ].setSpace(height: 10),
)

上述代码会在每个小部件之间插入 SizedBox(height: 10, width: null)。

对于 Row 使用 setSpace(width: 10)，这将在每个小部件之间插入 SizedBox(width: 10, height: null)。

start 参数会在第一个小部件之前插入 SizedBox，end 参数会在最后一个小部件之后插入 SizedBox。

[
  ...widgets
].setSpace(start: 15, height: 10, end: 15),

start 和 end 参数需要设置 height 或 width 参数。start 和 end 参数会覆盖 height 或 width 的值。要仅在开头和结尾插入 SizedBox，可以将 height 或 width 设置为 0。

Adjustments（调整）

要调整插入的 SizedBox 的 height 或 width，可以使用 AdjustSpace 和 NoSpace 小部件。

Column(  
  children: [
    Text("A"),
    AdjustSpace(adjust: 10),   // 增加 10 到高度
    Text("B"),
    AdjustSpace(adjust: -5),   // 减少 5 到高度
    Text("C"),  
    AdjustSpace(override: 20), // 覆盖高度
    Text("D"),
    NoSpace(),                 // 不在这里插入 SizedBox
    Text("E"),
    Text("F"),
  ].setSpace(start: 15, height: 10, end: 15),
)

更多关于Flutter布局优化插件spacious_widgets的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼

更多关于Flutter布局优化插件spacious_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

spacious_widgets 是一个 Flutter 插件，旨在简化布局中的间距管理，减少手动设置 SizedBox 或 Padding 的需求。它提供了一些预定义的间距小部件，帮助开发者更高效地构建用户界面。

安装

首先，你需要在 pubspec.yaml 文件中添加 spacious_widgets 依赖：

dependencies:
  spacious_widgets: ^1.0.0

然后运行 flutter pub get 来安装依赖。

使用 `spacious_widgets`

spacious_widgets 提供了一些常用的小部件来简化布局中的间距管理。以下是一些常见的用法：

1. `SpacedColumn` 和 `SpacedRow`

SpacedColumn 和 SpacedRow 是 Column 和 Row 的替代品，它们允许你在子部件之间自动添加间距。

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SpacedColumn(
      spacing: 10.0, // 添加 10.0 的间距
      children: [
        Text('Item 1'),
        Text('Item 2'),
        Text('Item 3'),
      ],
    );
  }
}

在上面的例子中，SpacedColumn 会在每个子部件之间自动添加 10.0 的间距。

2. `SpacedWrap`

SpacedWrap 是 Wrap 的替代品，它允许你在子部件之间添加间距。

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SpacedWrap(
      spacing: 8.0, // 子部件之间的间距
      runSpacing: 8.0, // 行之间的间距
      children: [
        Text('Item 1'),
        Text('Item 2'),
        Text('Item 3'),
        Text('Item 4'),
      ],
    );
  }
}

3. `SpacedGridView`

SpacedGridView 是 GridView 的替代品，它允许你在子部件之间添加间距。

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SpacedGridView.count(
      crossAxisCount: 2,
      spacing: 8.0, // 子部件之间的间距
      runSpacing: 8.0, // 行之间的间距
      children: [
        Text('Item 1'),
        Text('Item 2'),
        Text('Item 3'),
        Text('Item 4'),
      ],
    );
  }
}

4. `SpacedListView`

SpacedListView 是 ListView 的替代品，它允许你在子部件之间添加间距。

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SpacedListView(
      spacing: 8.0, // 子部件之间的间距
      children: [
        Text('Item 1'),
        Text('Item 2'),
        Text('Item 3'),
      ],
    );
  }
}

Flutter布局优化插件spacious_widgets的使用