Flutter布局控制插件absolute_sizer的使用

Flutter布局控制插件absolute_sizer的使用

让您的Flutter应用轻松实现响应式设计！

Absolute Sizer 是一个轻量级且动态的Flutter包，能够根据屏幕大小动态计算小部件的高度和宽度，确保您的应用在所有设备上看起来都很棒。

🚀 特性

  • 动态响应式：自动调整小部件的高度和宽度以适应任何屏幕。
  • 轻量级：性能开销极低。
  • 简单直观：易于使用的API，无缝集成。
  • 可定制化：在保持响应式的同时，可以根据独特需求进行设计调整。

Getting Started（开始使用）

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

dependencies:
  absolute_sizer: ^0.0.1

然后导入：

import 'package:absolute_sizer/absolute_sizer.dart';

Usage（使用方法）

接下来，使用以下代码：

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

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

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

  // 这是你的应用的根组件。
  @override
  Widget build(BuildContext context) {

    AppSizes().init(context);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试：运行你的应用。你会看到应用有一个紫色的工具栏。然后，不退出应用，
        // 尝试将colorScheme中的seedColor改为Colors.green
        // 并重新加载（保存更改或按“热重载”按钮）。
        //
        // 注意：计数器不会重置到零；应用程序状态在重载期间不会丢失。要重置状态，请使用热重启。
        //
        // 这不仅适用于值，也适用于代码：大多数代码更改都可以通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: 实现构建
    return Scaffold(
      body: Center(
        child: Container(
          height: getHeight(20), // 设置高度为屏幕高度的20%
          width: getWidth(20),   // 设置宽度为屏幕宽度的20%
          color: Colors.blue,
        ),
      ),
    );
  }
}

Additional Information（更多信息）

Customization（自定义）

absolute_sizer 包设计用于使您的设计高度可定制和响应式。

Compatibility（兼容性）

该包与目标Android和iOS平台的Flutter应用兼容。它已在多种设备和屏幕尺寸上进行了测试，以确保流畅的用户体验。该包也针对性能进行了优化，适合处理大量数据的应用。

Installation（安装）

要使用 absolute_sizer，请在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  absolute_sizer: ^0.0.1

更多关于Flutter布局控制插件absolute_sizer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter布局控制插件absolute_sizer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


absolute_sizer 是一个 Flutter 插件，用于在布局中精确控制子部件的尺寸和位置。它可以帮助你以绝对尺寸（像素）或相对尺寸（百分比）来设置子部件的大小和位置。这个插件非常适合需要精确控制布局的场景。

安装

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

dependencies:
  flutter:
    sdk: flutter
  absolute_sizer: ^1.0.0  # 请根据最新版本号替换

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

使用示例

下面是一个简单的示例，展示如何使用 absolute_sizer 来精确控制子部件的大小和位置。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AbsoluteSizer(
            width: 300,  // 设置容器的宽度为 300 像素
            height: 200, // 设置容器的高度为 200 像素
            child: Container(
              color: Colors.blue,
              child: AbsolutePositioned(
                left: 50,  // 子部件距离左侧 50 像素
                top: 30,   // 子部件距离顶部 30 像素
                width: 100, // 子部件的宽度为 100 像素
                height: 50, // 子部件的高度为 50 像素
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

主要组件

  1. AbsoluteSizer:

    • 用于设置容器的绝对尺寸（宽度和高度）。
    • width: 容器的宽度（像素）。
    • height: 容器的高度（像素）。
    • child: 容器内的子部件。

  2. AbsolutePositioned:

    • 用于设置子部件在容器内的绝对位置和尺寸。
    • left: 子部件距离左侧的距离（像素）。
    • top: 子部件距离顶部的距离（像素）。
    • width: 子部件的宽度（像素）。
    • height: 子部件的高度（像素）。
    • child: 子部件本身。

其他功能

absolute_sizer 还支持相对尺寸（百分比）的设置。你可以使用 PercentageSizer 和 PercentagePositioned 来设置子部件的尺寸和位置为父容器尺寸的百分比。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: PercentageSizer(
            widthPercent: 0.8,  // 设置容器的宽度为父容器宽度的 80%
            heightPercent: 0.5, // 设置容器的高度为父容器高度的 50%
            child: Container(
              color: Colors.blue,
              child: PercentagePositioned(
                leftPercent: 0.1,  // 子部件距离左侧的距离为父容器宽度的 10%
                topPercent: 0.2,   // 子部件距离顶部的距离为父容器高度的 20%
                widthPercent: 0.5, // 子部件的宽度为父容器宽度的 50%
                heightPercent: 0.3, // 子部件的高度为父容器高度的 30%
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部