Flutter尺寸设置插件size_setter_plus的使用

Flutter尺寸设置插件size_setter_plus的使用

size_setter_plus 是一个用于在 Flutter 应用程序中设置尺寸的插件。它可以帮助开发者根据不同的设备屏幕大小来调整 UI 元素的尺寸，从而实现更好的适配效果。

安装

首先，在你的 pubspec.yaml 文件中添加 size_setter_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  size_setter_plus: ^版本号

然后运行 flutter pub get 来安装该插件。

使用示例

以下是一个简单的示例，展示了如何使用 size_setter_plus 插件来设置不同尺寸。

示例代码

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void didChangeDependencies() {
    // 设置源设备尺寸，以便后续计算响应式尺寸
    SizeSetterUtils.setSourceDeviceSize(
        context: context, sourceWidth: 430, sourceHeight: 932);

    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '适应性尺寸'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          // 一个红色容器，高度为父容器高度的20%，宽度为100%
          Container(
            color: Colors.red,
            height: 20.ph, // 使用 .ph 表示父容器高度的百分比
            width: 100.ph, // 使用 .ph 表示父容器高度的百分比
            alignment: Alignment.center,
            child: const Text("20% 高度和 100% 宽度"),
          ),

          // 一个20像素的高度间隙，具有响应式调整能力
          SizedBox(height: 20), // 直接使用SizedBox来设置固定高度
          Container(
            color: Colors.blue,
            height: 200.h, // 使用 .h 表示屏幕高度的百分比
            width: 200.w, // 使用 .w 表示屏幕宽度的百分比
            alignment: Alignment.center,
            child: const Text("200像素宽度，具有响应式尺寸"),
          ),
        ],
      ),
    );
  }
}

解释

1. 设置源设备尺寸：

   • 在 didChangeDependencies() 方法中，通过调用 SizeSetterUtils.setSourceDeviceSize 方法设置源设备的宽度和高度。这有助于后续计算响应式尺寸。

   SizeSetterUtils.setSourceDeviceSize(
       context: context, sourceWidth: 430, sourceHeight: 932);
   

2. 使用响应式尺寸：

   • 在构建方法中，使用 .ph 和 .w 等标记来表示相对父容器或屏幕的百分比尺寸。

   Container(
     height: 20.ph, // 父容器高度的20%
     width: 100.ph, // 父容器高度的100%
   )
   

   • 同样地，使用 .h 和 .w 来表示屏幕高度和宽度的百分比。

   Container(
     height: 200.h, // 屏幕高度的200像素
     width: 200.w, // 屏幕宽度的200像素
   )