Flutter自适应尺寸插件adaptive_sizer的使用

Flutter自适应尺寸插件adaptive_sizer的使用

本包将帮助你根据设计和设备的比例调整应用尺寸。

内容

开始使用

这个项目可以帮助你根据一个参考尺寸来使你的应用响应式。你可以通过引用尺寸库来处理其余的计算。只需要在高度后面添加 .h，在宽度后面添加 .w，在半径后面添加 .r，在与字体相关的尺寸后面添加 .sp。

基本用法

import 'package:adaptive_sizer/adaptive_sizer.dart';

示例

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Demo',
      home: HomePage(title: 'Demo'),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // 初始化AdaptiveSizerConfig，设置设计尺寸
    AdaptiveSizerConfig.init(
      context,
      designWidth: 375,
      designHeight: 800,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'.toUpperCase()),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 50.w, // 使用50%的设计宽度
              height: 50.h, // 使用50%的设计高度
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.r), // 使用10%的设计圆角半径
                color: Colors.blue,
              ),
              child: Center(
                child: Text(
                  'Hello, adaptive sizer!',
                  style: TextStyle(fontSize: 20.sp), // 使用20sp的字体大小
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

为了即使系统字体大小不同也能保持字体大小一致：

MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  builder: (context, widget) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: widget,
    );
  },
  home: HomePage(title: 'Demo'),
),

更多关于Flutter自适应尺寸插件adaptive_sizer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自适应尺寸插件adaptive_sizer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


adaptive_sizer 是一个 Flutter 插件，旨在帮助开发者更轻松地创建自适应布局，使得应用在不同屏幕尺寸和设备上都能有良好的显示效果。该插件通过提供一些便捷的方法和工具，使得开发者可以根据屏幕的宽度、高度或对角线尺寸来动态调整 UI 元素的大小。

安装

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

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

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

基本用法

adaptive_sizer 提供了几个核心方法，帮助你根据屏幕尺寸动态调整 UI 元素的大小。

1. 初始化 AdaptiveSizer

在你的应用启动时，初始化 AdaptiveSizer，通常是在 main.dart 文件中：

import 'package:adaptive_sizer/adaptive_sizer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AdaptiveSizer(
      child: MaterialApp(
        title: 'Adaptive Sizer Example',
        home: HomeScreen(),
      ),
    );
  }
}

2. 使用 AdaptiveSizer 方法

在 AdaptiveSizer 的子树中，你可以使用 AdaptiveSizer 提供的方法来调整 UI 元素的大小。

  • AdaptiveSizer.width(double width): 根据屏幕宽度动态调整大小。
  • AdaptiveSizer.height(double height): 根据屏幕高度动态调整大小。
  • AdaptiveSizer.radius(double radius): 根据屏幕对角线尺寸动态调整圆角半径。
  • AdaptiveSizer.fontSize(double fontSize): 根据屏幕对角线尺寸动态调整字体大小。

示例

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Sizer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: AdaptiveSizer.width(100),  // 根据屏幕宽度调整宽度
              height: AdaptiveSizer.height(50), // 根据屏幕高度调整高度
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(AdaptiveSizer.radius(10)), // 根据屏幕对角线尺寸调整圆角半径
              ),
              child: Center(
                child: Text(
                  'Hello, Adaptive Sizer!',
                  style: TextStyle(
                    fontSize: AdaptiveSizer.fontSize(20), // 根据屏幕对角线尺寸调整字体大小
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

自定义基准尺寸

你可以通过设置 designSize 来定义基准尺寸，adaptive_sizer 会根据这个基准尺寸来动态调整 UI 元素的大小。

AdaptiveSizer(
  designSize: Size(375, 812), // iPhone X 的屏幕尺寸
  child: MaterialApp(
    title: 'Adaptive Sizer Example',
    home: HomeScreen(),
  ),
);
回到顶部