Flutter动态布局尺寸获取插件size_builder的使用

Flutter动态布局尺寸获取插件size_builder的使用

📱💻📱

特性

使比例与屏幕长度、宽度和直径成比例，以获得响应式设计。

开始使用

运行以下命令：

$ flutter pub add size_builder

这将在您的包的pubspec.yaml文件中添加如下行（并运行隐式的flutter pub get）：

dependencies:
  size_builder: ^1.0.0

或者，您的编辑器可能支持flutter pub get。请查阅您的编辑器文档以了解更多信息。

导入它

现在可以在您的Dart代码中使用：

import 'package:size_builder/size_builder.dart';

响应式设计

可以制作流畅的多形式屏幕

如何使用

首先，您需要在所有屏幕上添加Scaling类，并传递（BuildContext）

Scaling.scaling(context);

使用它来创建响应式的高度和宽度

height: Scaling.H(200),
width: Scaling.W(200),

并且可以使用它来创建响应式的大小

用于字体大小或其他任何内容

Text(
  "Scaling",
  style: TextStyle(
    fontSize: Scaling.S(20),
  ),
),

未来更新敬请期待

如果有任何问题或建议，请随时联系我。

随后，您可以看到完整的示例代码

import 'package:example/src/app_size.dart';
import 'package:flutter/material.dart';

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

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

  // 这个小部件是您的应用程序的根。它是有状态的，这意味着它有一个状态对象（定义如下），该状态对象包含影响其外观的字段。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您的应用程序的主题。
        //
        // 尝试用"flutter run"运行您的应用程序。您会看到应用程序有一个蓝色工具栏。然后，不退出应用程序，尝试将下面的primarySwatch更改为Colors.green并调用"热重载"（在您运行"flutter run"的控制台中按"r"，或简单地保存更改以在Flutter IDE中进行"热重载"）。请注意计数器没有重置为零；应用程序没有重新启动。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Size_builder : '),
    );
  }
}

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

  // 这个小部件是您的应用程序的主页。它是有状态的，这意味着它有一个状态对象（定义如下），该状态对象包含影响其外观的字段。
  // 这个类是状态的配置。它保留由父级（在这个例子中是App小部件）提供的值（在这种情况下是标题）并被状态的构建方法使用。Widget子类中的字段总是标记为"final"。
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    ///########################################
    ///
    /// ##############################
    ///
    Scaling.scaling(context);

    // 此方法每次调用setState时都会被重新运行，例如由上面的_incrementCounter方法调用。
    //
    // Flutter框架已经优化了重建方法的速度，因此您可以重建任何需要更新的内容，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 在这里，我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，并使用它来设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: Scaling.H(200),
          width: Scaling.W(200),
          decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(Scaling.S(30))),
          child: Text(
            "Scaling",
            style: TextStyle(
              fontSize: Scaling.S(20),
            ),
          ),
        ),
      ),
    );
  }
}