Flutter布局管理插件m_sizer的使用

Flutter布局管理插件m_sizer的使用

m_sizer 可以方便地为小部件设置宽度、高度和字体大小（单位为像素）。

安装

使用包管理器 pub 来安装 m_sizer。

flutter pub add m_sizer

使用

import 'package:m_sizer/m_sizer.dart';

// 宽度
double width = 10.wPX;

// 高度
double height = 10.hPX;

// 字体大小
double fontSize = 10.fPX;

示例代码

以下是一个完整的示例代码，展示如何在应用中使用 m_sizer。

// ignore_for_file: depend_on_referenced_packages

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

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

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MSizer(
      builder: (context, orientation) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'MSizer',
          theme: ThemeData.light(),
          home: Scaffold(
            body: Center(
              child: Container(
                // 设置容器的高度为屏幕高度的48%
                height: 48.hPX,
                // 设置容器的宽度为屏幕宽度的313%
                width: 313.wPX,
                color: Colors.red,
                alignment: Alignment.center,
                child: Text(
                  "检查字体大小",
                  style: TextStyle(
                    // 设置文本的字体大小为屏幕高度的18%
                    fontSize: 18.fPX,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

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

1 回复

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


m_sizer 是一个用于 Flutter 的布局管理插件，旨在帮助开发者更方便地处理不同屏幕尺寸的布局适配问题。通过 m_sizer，你可以使用百分比、比例等方式来定义布局，使得应用在不同设备上都能有良好的显示效果。

安装 m_sizer

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

dependencies:
  flutter:
    sdk: flutter
  m_sizer: ^2.0.0  # 请检查最新版本

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

基本使用

  1. 初始化 m_sizer

    在你的应用的入口文件（通常是 main.dart）中，初始化 m_sizer：

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

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

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

  2. 使用 m_sizer 进行布局

    在需要使用 m_sizer 的地方，你可以通过 context 来获取屏幕的宽度、高度，并使用百分比来定义布局。

    class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('m_sizer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 50.w,  // 50% of screen width
              height: 20.h, // 20% of screen height
              color: Colors.blue,
              child: Center(
                child: Text(
                  '50% Width, 20% Height',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 20), // 固定高度的间距
            Container(
              width: 100.w,  // 100% of screen width
              height: 10.h,  // 10% of screen height
              color: Colors.red,
              child: Center(
                child: Text(
                  '100% Width, 10% Height',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部