Flutter插件nebula的介绍与使用方法详解

Flutter插件nebula的介绍与使用方法详解

nebula 插件可以帮助您的 Flutter 开发之旅变得更加轻松，通过提供辅助小部件、实用工具和抽象。

Dimension 小部件

Dimension 小部件用于获取与上下文相关的尺寸（高度和宽度），而不是每次都使用 MediaQuery。

Dimension(
  /// 您可以省略上下文，在这种情况下，小部件将使用自己的上下文
  context: context,
  builder: (h, w) {
    return Row(
      children: [
        SizedBox(
          height: h * 0.3,
          width: w * 0.3,
          child: Center(child: Text('A')),
        ),
        SizedBox(
          height: h * 0.3,
          width: w * 0.5,
          child: Center(child: Text('B')),
        ),
        SizedBox(
          height: h * 0.3,
          width: w * 0.2,
          child: Center(child: Text('C')),
        ),
      ],
    );
  },
)

context 参数是可选的，如果您不提供它，Dimension 小部件将使用其自身的上下文来获取高度和宽度。

FitSize 小部件

FitSize 小部件会将其子组件拟合到提供的尺寸中。该小部件被包裹在一个 FittedBox 和一个 SizedBox 中，并且传递了提供的参数。您可以像使用 SizedBox 一样使用它，只是内容会被拟合到提供的尺寸中。

FitSize(
  height: 250,
  alignment: Alignment.topRight,
  fit: BoxFit.fitWidth,
  clipBehavior: Clip.none,
  child: Text('This is my FitSize'),
),

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 nebula 插件的 FitSize 和 Dimension 小部件。

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

class MyExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          /// 使用 `FitSize` 小部件
          FitSize(
            height: 250,
            alignment: Alignment.topRight,
            fit: BoxFit.fitWidth,
            clipBehavior: Clip.none,
            child: Text('This is my FitSize'),
          ),

          /// 使用 `Dimension` 小部件
          Dimension(
            /// 您可以省略上下文，在这种情况下，小部件将使用自己的上下文
            context: context,

            builder: (h, w) {
              return Row(
                children: [
                  SizedBox(
                    height: h * 0.3,
                    width: w * 0.3,
                    child: Center(child: Text('A')),
                  ),
                  SizedBox(
                    height: h * 0.3,
                    width: w * 0.5,
                    child: Center(child: Text('B')),
                  ),
                  SizedBox(
                    height: h * 0.3,
                    width: w * 0.2,
                    child: Center(child: Text('C')),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }
}