Flutter空间管理插件spaces的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter空间管理插件spaces的使用

Spaces

logo

定义全局间距常量以构建一致且响应式的应用。

安装

在pubspec.yaml文件中添加依赖：

dependencies:
    spaces: <version>

快速开始

return MaterialApp(
    // 定义
    builder: (context, child) => Spacing(
        dataBuilder: (context) {
          final mediaQuery = MediaQuery.of(context);
          if (mediaQuery.size.width > 500) {
            return SpacingData.generate(30);
          }
          return SpacingData.generate(10);
        },
        child: child,
    ),
    home: Builder(builder: (context) {
        // 使用
        final spacing = Spacing.of(context);
        return SpacedColumn.normal(
            padding: spacing.insets.all.semiBig,
            children: <Widget>[
                Text('hello'),
                Space.big(),
                Text('world'),
            ],
        );
      })
    ),
)

使用

配置间距

一个Spacing小部件应该声明你的应用程序的全局间距配置。

return MaterialApp(
    builder: (context, child) => Spacing.fixed(
        data: SpacingData.generate(10.0), // 这将生成一套基于`10.0`的基本值的间距常量。
        child: child,
    ),
    /// ...
)

生成

通过调用Spacing.generate构造函数，一组常量会从单个基本值自动生成。

生成的值包括：

  • extraSmall : value * 0.2
  • small : value * 0.4
  • semiSmall : value * 0.6
  • normal : value
  • semiBig : value * 1.5
  • big : value * 2.5
  • extraBig : value * 5.0
SpacingData.generate(10.0)

从间距生成

如果你想要定义各种间距值，可以使用以下方式：

SpacingData.fromSpaces(
    extraSmall: 1.0,
    small: 2.0,
    semiSmall: 4.0,
    normal: 8.0,
    semiBig: 12.0,
    big: 20.0,
    extraBig: 100.0,
)

响应式间距

你可以通过设置Spacing构造函数的dataBuilder属性来根据给定上下文生成配置。

Spacing(
    dataBuilder: (context) {
        final mediaQuery = MediaQuery.of(context);
        return SpacingData.generate(mediaQuery.size.width > 300.0 ? 20.0 : 10.0),
    },
    child: child,
)

使用常量

要访问各种间距常量，只需使用Spacing.of(context)获取器或context.spacing()扩展方法。

final spacing = Spacing.of(context);
// spacing.spaces.semiBig

尺寸变化

有七个可用的间距常量：extraSmall、small、semiSmall、normal、semiBig、big、extraBig；

final spacing = Spacing.of(context);
return SizedBox(
    width: spacing.spaces.semiSmall,
);

填充助手

你有来自<spacing>.insets.<selector>.<size>的EdgeInsets预设。

可用的选择器包括：all、horizontal、vertical、onlyLeft、onlyTop、onlyRight、onlyBottom、exceptLeft、exceptRight、exceptTop、exceptBottom。

final spacing = Spacing.of(context);
return Padding(
    padding: spacing.insets.exceptLeft.semiBig,
    child: Text('Hello'),
);

小部件

Space

Space小部件使用gap在内部定义Flex、Column、Row或Scrollable（如ListView）中的空间。

return Column(
    children: [
        Text('hello'),
        const Space.semiSmall(),
        Text('world'),
    ],
);

SpacedFlex / SpacedColumn / SpacedRow

像Flex / Column / Row一样，但具有额外的padding和spaceBetween属性。

final spacing = Spacing.of(context);
return SpacedColumn.small(
    padding: spacing.insets.all.normal,
    children: [
        Text('hello'),
        Text('world'),
    ],
);

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spacing Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      builder: (context, child) => Spacing(
        dataBuilder: (context) {
          final mediaQuery = MediaQuery.of(context);
          if (mediaQuery.size.width > 500) {
            return SpacingData.generate(30);
          }
          return SpacingData.generate(10);
        },
        child: child ?? SizedBox(),
      ),
      home: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Spacing'),
          bottom: TabBar(
            tabs: [
              Tab(text: 'Values'),
              Tab(text: 'Space'),
              Tab(text: 'SpacedFlex'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            const ValuesTab(),
            const SpaceTab(),
            const SpacedFlexTab(),
          ],
        ),
      ),
    );
  }
}

class ValuesTab extends StatelessWidget {
  Widget _box(BuildContext context, String title, double height) {
    final spacing = Spacing.of(context);
    return Padding(
      padding: spacing.insets.all.normal,
      child: Column(
        children: [
          Text(title, textAlign: TextAlign.center),
          Container(color: Colors.red, width: spacing.spaces.big, height: height),
        ],
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final spacing = Spacing.of(context);
    return Container(
      color: Colors.red.withOpacity(0.2),
      margin: spacing.insets.all.big,
      padding: spacing.insets.all.normal,
      child: ListView(
        children: [
          _box(context, 'extraSmall', spacing.spaces.extraSmall),
          _box(context, 'small', spacing.spaces.small),
          _box(context, 'semiSmall', spacing.spaces.semiSmall),
          _box(context, 'normal', spacing.spaces.normal),
          _box(context, 'semiBig', spacing.spaces.semiBig),
          _box(context, 'big', spacing.spaces.big),
          _box(context, 'extraBig', spacing.spaces.extraBig),
        ],
      ),
    );
  }
}

class SpaceTab extends StatelessWidget {
  Widget _box(BuildContext context) {
    return Container(color: Colors.blue, width: 20.0, height: 20.0);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final spacing = Spacing.of(context);
    return Container(
      color: Colors.blue.withOpacity(0.2),
      margin: spacing.insets.all.big,
      padding: spacing.insets.all.normal,
      child: ListView(
        children: [
          _box(context),
          Space.extraSmall(),
          _box(context),
          Space.small(),
          _box(context),
          Space.semiSmall(),
          _box(context),
          Space.normal(),
          _box(context),
          Space.semiBig(),
          _box(context),
          Space.big(),
          _box(context),
          Space.extraBig(),
          _box(context),
        ],
      ),
    );
  }
}

class SpacedFlexTab extends StatelessWidget {
  Widget _box(BuildContext context) {
    return Container(color: Colors.green, width: 20.0, height: 20.0);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final spacing = Spacing.of(context);
    return Container(
      color: Colors.green.withOpacity(0.2),
      child: ListView(
        children: [
          SpacedColumn.normal(
            padding: spacing.insets.all.normal,
            children: [
              _box(context),
              _box(context),
              _box(context),
              _box(context),
            ],
          ),
          Center(
            child: SpacedRow.normal(
              padding: spacing.insets.all.normal,
              mainAxisSize: MainAxisSize.min,
              children: [
                _box(context),
                _box(context),
                _box(context),
                _box(context),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter空间管理插件spaces的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter空间管理插件spaces的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用spaces插件进行空间管理的代码示例。spaces插件是一个假设的插件名称，因为Flutter生态系统中并没有一个广泛知名的名为spaces的官方插件。不过，我会基于一个常见的空间管理需求（例如，管理屏幕上的不同区域或视图）来编写一个示例，展示如何可能实现这样的功能。

在实际开发中，你可能会使用如Stack、Column、Row等布局小部件，或者第三方库如provider、riverpod等来进行状态管理。但这里，为了演示目的，我将创建一个自定义的SpaceManager小部件，它使用Flutter的基本布局和状态管理功能来模拟空间管理。

1. 创建一个Flutter项目

首先，确保你已经安装了Flutter SDK，并创建了一个新的Flutter项目。

flutter create space_management_app
cd space_management_app

2. 添加自定义的SpaceManager小部件

在lib目录下创建一个新的Dart文件，比如space_manager.dart，并添加以下代码：

import 'package:flutter/material.dart';

class SpaceManager extends StatefulWidget {
  @override
  _SpaceManagerState createState() => _SpaceManagerState();
}

class _SpaceManagerState extends State<SpaceManager> {
  // 假设我们有两个空间，每个空间可以显示不同的内容
  String space1Content = "Space 1 Content";
  String space2Content = "Space 2 Content";

  void updateSpace1Content(String newContent) {
    setState(() {
      space1Content = newContent;
    });
  }

  void updateSpace2Content(String newContent) {
    setState(() {
      space2Content = newContent;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        // 第一个空间
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(space1Content),
            ),
          ),
        ),
        // 第二个空间
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(space2Content),
            ),
          ),
        ),
        // 按钮来更新空间内容（仅用于演示）
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => updateSpace1Content("Updated Space 1 Content"),
                child: Text("Update Space 1"),
              ),
              SizedBox(width: 16),
              ElevatedButton(
                onPressed: () => updateSpace2Content("Updated Space 2 Content"),
                child: Text("Update Space 2"),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

3. 使用SpaceManager小部件

打开lib/main.dart文件，并使用SpaceManager小部件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Space Management Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Space Management Demo'),
        ),
        body: Center(
          child: SpaceManager(),
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用了：

flutter run

这个简单的示例展示了如何创建一个自定义的SpaceManager小部件来管理屏幕上的两个空间，每个空间都可以显示不同的内容，并且可以通过按钮来更新这些内容。虽然这不是一个真实的spaces插件的示例，但它提供了一个基本的框架，展示了如何在Flutter中进行空间管理。如果你有一个特定的spaces插件，你可能需要查阅该插件的文档来获取更具体的用法。

回到顶部