Flutter尺寸获取插件 size_helper 的使用

size_helper 是一个用于开发响应式UI的Flutter插件，它提供了对基于当前屏幕大小的UI组件的更多控制。通过这个插件，你可以更轻松地管理不同设备和屏幕尺寸下的布局。

不推荐的做法

在没有使用 size_helper 之前，你可能会这样写代码：

@override
Widget build(BuildContext context) {
  final screenSize = MediaQuery.of(context).size;
  final screenHeight = screenSize.height;
  return Container(
    color: Colors.blue,
    margin: screenHeight < 300
        ? const EdgeInsets.all(4.0)
        : screenHeight < 1000
            ? screenHeight < 600
                ? const EdgeInsets.all(8.0)
                : const EdgeInsets.all(16.0)
            : screenHeight > 800
                ? const EdgeInsets.all(32.0)
                : const EdgeInsets.all(16.0),
    child: Text('Hello world'),
  );
}

这种方式不仅难以阅读，而且维护起来也很麻烦。幸运的是，size_helper 插件可以帮你解决这个问题。

如何使用 size_helper？

1. 使用 help 方法

只需传递上下文并指定你需要的选项（任何数据类型），SizeHelper 就会为你处理剩下的部分。

方法结构

SizeHelper.of(context).help(
  mobileSmall: /*return whatever you want*/
)

// 或者

context.sizeHelper(
  mobileSmall: /*return whatever you want*/
)

示例 1

Container(
  margin: SizeHelper.of(context).help(
    mobileLarge: const EdgeInsets.all(8.0),
    tableNormal: const EdgeInsets.all(16.0),
    tabletExtraLarge: const EdgeInsets.all(24.0),
    desktopLarge: const EdgeInsets.all(32.0),
  )
)

示例 2

Container(
  width: SizeHelper.of(context).help(
    mobileLarge: 200.0,
    tableNormal: 240.0,
    tabletExtraLarge: 325.0,
    desktopLarge: 380.0,
  )
)

2. 使用 helpBuilder 方法

如果你需要访问当前屏幕的宽度、高度和方向，可以使用 helpBuilder 方法。

方法结构

SizeHelper.of(context).helpBuilder(
  mobileSmall: (screenInfo) => /* return whatever you want with help of screenInfo(width, height, orientation */
)

// 或者

context.sizeHelperBuilder(
  mobileSmall: (screenInfo) => /* return whatever you want with help of screenInfo(width, height, orientation */
)

示例 1

Scaffold(
  body: SizeHelper.of(context, printScreenInfo: true).helpBuilder(
    mobileLarge: (_) => Container(
      alignment: Alignment.center,
      color: Colors.green,
      child: Text('mobileLarge'),
    ),
    tabletSmall: (_) => Container(
      alignment: Alignment.center,
      color: Colors.teal,
      child: Text('tabletSmall'),
    ),
    tabletLarge: (_) => Container(
      alignment: Alignment.center,
      color: Colors.deepPurple,
      child: Text('tabletLarge'),
    ),
    desktopNormal: (screenInfo) => Container(
      alignment: Alignment.center,
      color: screenInfo.height > 850 ? Colors.orange : Colors.yellow,
      child: Text('desktopNormal'),
    ),
  ),
);

示例 2

Scaffold(
  body: context.sizeHelperBuilder(
    mobileExtraLarge: (_) => SingleChildScrollView(
      child: Column(
        children: [
          Text('text 1'),
          Text('text 2'),
          Text('text 3'),
        ],
      ),
    ),
    tabletLarge: (_) => SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          Text('text 1'),
          Text('text 2'),
          Text('text 3'),
        ],
      ),
    ),
    desktopSmall: (_) => Wrap(
      children: [
        Text('text 1'),
        Text('text 2'),
        Text('text 3'),
      ],
    ),
  ),
)

完整示例 Demo

下面是一个完整的示例，展示了如何使用 size_helper 来创建响应式布局。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return _buildExample1(context);
  }

  Widget _buildExample1(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Size Helper Example')),
      body: SizeHelper.of(context, printScreenInfo: true).helpBuilder(
        mobileNormal: (_) => Container(
          alignment: Alignment.center,
          color: Colors.greenAccent,
          child: Text('mobileNormal'),
        ),
        mobileLarge: (_) => Container(
          alignment: Alignment.center,
          color: Colors.green,
          child: Text('mobileLarge'),
        ),
        mobileExtraLarge: (_) => Container(
          alignment: Alignment.center,
          color: Colors.cyanAccent,
          child: Text('mobileExtraLarge'),
        ),
        tabletSmall: (_) => Container(
          alignment: Alignment.center,
          color: Colors.teal,
          child: Text('tabletSmall'),
        ),
        tabletNormal: (_) => Container(
          alignment: Alignment.center,
          color: Colors.blue,
          child: Text('tabletNormal'),
        ),
        tabletLarge: (_) => Container(
          alignment: Alignment.center,
          color: Colors.deepPurple,
          child: Text('tabletLarge'),
        ),
        tabletExtraLarge: (_) => Container(
          alignment: Alignment.center,
          color: Colors.pink,
          child: Text('tabletExtraLarge'),
        ),
        desktopSmall: (_) => Container(
          alignment: Alignment.center,
          color: Colors.red,
          child: Text('desktopSmall'),
        ),
        desktopNormal: (screenInfo) => Container(
          alignment: Alignment.center,
          color: screenInfo.height > 850 ? Colors.orange : Colors.yellow,
          child: Text('desktopNormal'),
        ),
      ),
    );
  }
}

总结

size_helper 插件提供了一种简单且有效的方式来处理不同屏幕尺寸下的UI布局问题。通过使用 help 和 helpBuilder 方法，你可以轻松实现响应式设计，并且代码更加简洁易读。