Flutter设计尺寸转换插件designpx的使用

Flutter设计尺寸转换插件designpx的使用

实现响应式屏幕设计，你只需要添加要应用的设计坐标并开始以正常模式工作。

特性

响应式屏幕。

开始使用

你只需要添加要应用的设计坐标并开始以正常模式工作。

使用方法

首先设置包，并在主Widget中设置包，在你的基础Widget之前。之后你可以使用像素单位的尺寸，例如：

  • int (宽度: w25) ， double (宽度: w(25)) .
  • int (高度: h38) ， double (高度: h(38)) .
  • int (字体大小: f14) ， double (字体大小: f(14)) .

你也可以使用百分比单位的尺寸，例如：

  • double (宽度: wx(25)) ， 宽度100%使用wx100 .
  • double (高度: hx(38)) ， 高度100%使用hx100 .

这样就可以在默认设计和不同屏幕上实现响应式布局。

import 'package:designpx/designpx_init.dart';

DesignPX(width: 390, height: 844, child: HomePage());

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

  // 这个widget是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const DesignPX(child: HomePage()), 
      // 默认设备屏幕为iPhone 12 Pro，宽度为390px，高度为844px
      // 你可以更改它，只需输入新的宽度和高度，例如：
      // const DesignPX(width: 375, height: 812, child: HomePage()),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orangeAccent,
      width: wx(90), // 它表示宽度的90%
      height: hx100, // 它表示全高100%
      child: Container(
        color: Colors.orangeAccent,
        width: w300,
        height: h500,
        child: Text(
          'Home Page',
          style: TextStyle(fontSize: f14),
        ),
      )
    );
  }
}

其他信息

实现响应式屏幕设计。


### 示例代码

```dart
import 'package:flutter/material.dart';
import 'package:designpx/designpx.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const DesignPX(width: 390, height: 844, child: Home());
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orangeAccent,
      width: w300,
      height: h500,
      child: Text(
        'Home Page',
        style: TextStyle(fontSize: f14),
      ),
    );
  }
}

更多关于Flutter设计尺寸转换插件designpx的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter设计尺寸转换插件designpx的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


designpx 是一个用于 Flutter 的设计尺寸转换插件，它可以帮助开发者将设计稿中的尺寸（通常以像素为单位）转换为 Flutter 中的逻辑像素（逻辑像素会根据设备的屏幕密度进行自动缩放）。这个插件特别适合在开发过程中保持设计的一致性。

安装 designpx 插件

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

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

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

使用 designpx 插件

1. 初始化 designpx

在使用 designpx 之前，你需要初始化它。通常你可以在 main.dart 中的 main 函数中进行初始化：

import 'package:designpx/designpx.dart';

void main() {
  DesignPx.init(
    designWidth: 375,  // 设计稿的宽度（通常以 iPhone 的设计稿宽度为准）
    designHeight: 812, // 设计稿的高度
  );
  runApp(MyApp());
}

2. 使用 DesignPx 进行尺寸转换

在代码中，你可以使用 DesignPx 来将设计稿中的像素尺寸转换为 Flutter 中的逻辑像素。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DesignPx Example'),
        ),
        body: Center(
          child: Container(
            width: DesignPx.px(200),  // 将设计稿中的 200px 转换为逻辑像素
            height: DesignPx.px(100), // 将设计稿中的 100px 转换为逻辑像素
            color: Colors.blue,
            child: Center(
              child: Text(
                'Hello, DesignPx!',
                style: TextStyle(fontSize: DesignPx.px(20)), // 将设计稿中的 20px 转换为逻辑像素
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 其他功能

designpx 还提供了其他一些功能，例如：

  • DesignPx.width 和 DesignPx.height：获取屏幕的宽度和高度。
  • DesignPx.scaleWidth 和 DesignPx.scaleHeight：根据设计稿的宽度和高度进行缩放。
double screenWidth = DesignPx.width;
double screenHeight = DesignPx.height;

double scaledWidth = DesignPx.scaleWidth(200); // 根据设计稿宽度缩放 200px
double scaledHeight = DesignPx.scaleHeight(100); // 根据设计稿高度缩放 100px
回到顶部