Flutter尺寸上下文管理插件sized_context的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter尺寸上下文管理插件sized_context的使用

✥ Sized Context - 简单的响应式尺寸管理

通过这个扩展包，你可以直接在构建上下文中轻松访问 MediaQuery 的尺寸信息：

Size size = context.sizePx;

它还提供了其他方便的方法，如横屏状态、屏幕对角线尺寸、基于英寸的测量、屏幕类型和百分比值：

bool isLandscape = context.isLandscape; // 替代：MediaQuery.of(context).orientation == Orientation.landscape
bool isTablet = context.diagonalInches >= 7; // 获取物理设备尺寸（英寸）
bool useSingleColumn = context.widthPx < 400; // 直接访问 .width 和 .height，无需通过 .size
double sidePadding = context.widthPercent(0.1); // 使用宽度或高度的百分比进行尺寸设置

🔨 安装

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

dependencies:
  sized_context: ^1.0.0+1

⚙ 导入

在 Dart 文件中导入 sized_context 包：

import 'package:sized_context/sized_context.dart';

🕹️ 使用

以下是 sized_context 提供的一些常用方法：

bool isLandscape = context.isLandscape;
// 像素单位
Size size = context.sizePx;
double width = context.widthPx;
double height = context.heightPx;
double diagonalPx = context.diagonalPx;

// 英寸单位
Size sizeInInches = context.sizeInches;
double widthInInches = context.widthInches;
double heightInInches = context.heightInches;
double diagonalInInches = context.diagonalInches;

// 百分比
double widthPercent = context.widthPct(0.1);
double heightPercent = context.heightPct(0.25);

你还可以直接访问 MediaQueryData 对象，以获取其他方法或属性：

EdgeInsets padding = context.mq.padding;
Size safeSize = context.mq.removePadding();

示例代码

以下是一个完整的示例代码，展示了如何使用 sized_context 插件来获取和显示设备的尺寸信息：

import 'dart:ui';

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

void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 打印窗口的物理尺寸
    print(window.physicalSize);

    return Material(
      child: Center(
        child: Text(
          "是否横屏: ${context.isLandscape}\n"
          "屏幕尺寸 (像素): ${context.sizePx}\n"
          "屏幕宽度 (像素): ${context.widthPx}\n"
          "屏幕高度 (像素): ${context.heightPx}\n"
          "屏幕对角线 (像素): ${context.diagonalPx}\n"
          "屏幕尺寸 (英寸): ${context.sizeInches}\n"
          "屏幕宽度 (英寸): ${context.widthInches}\n"
          "屏幕高度 (英寸): ${context.heightInches}\n"
          "屏幕对角线 (英寸): ${context.diagonalInches}\n"
          "宽度的10%: ${context.widthPct(0.1)}\n"
          "高度的10%: ${context.heightPct(0.1)}\n"
          "MediaQuery padding: ${context.mq.padding}\n",
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

更多关于Flutter尺寸上下文管理插件sized_context的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter尺寸上下文管理插件sized_context的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用sized_context插件来管理尺寸上下文的示例代码。sized_context插件提供了一些方便的方法来处理Flutter中的尺寸问题，尤其是当你需要在不同的布局环境中获取父组件的尺寸时。

首先，确保你已经在pubspec.yaml文件中添加了sized_context依赖：

dependencies:
  flutter:
    sdk: flutter
  sized_context: ^x.y.z  # 替换为最新版本号

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

下面是一个使用sized_context的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sized Context Example'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 200,
          child: Container(
            color: Colors.blue,
            child: SizedContextBuilder(
              builder: (context, size) {
                return Center(
                  child: Text(
                    'Parent size: ${size.width}x${size.height}',
                    style: TextStyle(color: Colors.white),
                  ),
                );
              },
            ),
          ),
        ),
        SizedBox(height: 20),
        Container(
          color: Colors.green,
          child: SizedContextBuilder(
            builder: (context, size) {
              return Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Width: ${size.width.toStringAsFixed(1)}',
                    style: TextStyle(color: Colors.white),
                  ),
                  SizedBox(width: 10),
                  Text(
                    'Height: ${size.height.toStringAsFixed(1)}',
                    style: TextStyle(color: Colors.white),
                  ),
                ],
              );
            },
          ),
        ),
      ],
    );
  }
}

在这个示例中，我们使用了SizedContextBuilder来构建两个不同上下文中的文本，显示父容器的尺寸。SizedContextBuilder的builder回调提供了当前父容器的尺寸（size），这使得我们可以在子组件中轻松访问和使用这些尺寸信息。

  1. 第一个SizedBox中，我们创建了一个蓝色的容器，并在其中使用了SizedContextBuilder来显示父容器的宽度和高度。
  2. 第二个容器中，我们使用SizedContextBuilder在绿色背景上显示了父容器的宽度和高度，这次是以稍微不同的布局形式。

这个示例展示了如何使用sized_context插件来在Flutter应用中方便地管理和使用尺寸上下文。根据你的具体需求，你可以调整这些代码片段以适应你的布局和逻辑。

回到顶部