Flutter屏幕适配与布局插件hondooye_sizer的使用

Flutter屏幕适配与布局插件hondooye_sizer的使用

hondooye_sizer 是一个非常有用的屏幕适配工具包，可以帮助开发者在不同设备上实现一致的UI布局。

开始使用

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

dependencies:
  hondooye_sizer: ^1.0.0

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

接下来，我们来看一下如何在实际项目中使用它。

示例代码

以下是一个完整的示例代码，展示了如何使用 hondooye_sizer 进行屏幕适配和布局。

main.dart

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

void main() {
  // 初始化适配器
  SizerUtil().init();
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用Sizer来调整大小
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Hondooye Sizer Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hondooye Sizer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用SizedBox进行宽度适配
            SizedBox(
              width: 50.sizerWidth,
              height: 50.sizerHeight,
              child: Container(
                color: Colors.red,
              ),
            ),
            SizedBox(
              width: 50.sizerWidth,
              height: 50.sizerHeight,
              child: Container(
                color: Colors.blue,
              ),
            ),
            // 使用Text进行字体大小适配
            Text(
              'Hello Hondooye Sizer!',
              style: TextStyle(fontSize: 20.sizerText),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter屏幕适配与布局插件hondooye_sizer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕适配与布局插件hondooye_sizer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


hondooye_sizer 是一个用于 Flutter 屏幕适配与布局的插件，它可以帮助开发者更轻松地实现不同屏幕尺寸的适配。以下是如何使用 hondooye_sizer 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  hondooye_sizer: ^1.0.0  # 请使用最新版本

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

2. 初始化 hondooye_sizer

在应用的入口文件（通常是 main.dart）中初始化 hondooye_sizer。你可以使用 Sizer 类来设置设计稿的尺寸，以便插件可以根据设计稿的尺寸进行适配。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Sizer(
      designSize: Size(375, 812), // 设计稿的尺寸，通常为 iPhone 11 的尺寸
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

3. 使用 hondooye_sizer 进行屏幕适配

在布局时，你可以使用 Sizer 提供的 width, height, fontSize 等方法来适配不同屏幕尺寸。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hondooye_sizer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: Sizer.width(100), // 100% 屏幕宽度
              height: Sizer.height(20), // 20% 屏幕高度
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, World!',
                  style: TextStyle(
                    fontSize: Sizer.fontSize(20), // 字体大小适配
                  ),
                ),
              ),
            ),
            SizedBox(height: Sizer.height(5)), // 5% 屏幕高度
            Container(
              width: Sizer.width(50), // 50% 屏幕宽度
              height: Sizer.height(10), // 10% 屏幕高度
              color: Colors.green,
              child: Center(
                child: Text(
                  'Flutter',
                  style: TextStyle(
                    fontSize: Sizer.fontSize(16), // 字体大小适配
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部