Flutter 实现响应式布局

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 分享

由于每个手机的屏幕尺寸不一样，当手机横竖屏切换的时候可能会用到响应式布局，下面我们就带大家看看Flutter中如何实现响应式布局

Flutter+Getx仿小米实战系列教程：https://www.itying.com/category-88-b0.html

1、使用MediaQuery：可以使用MediaQuery类来检索屏幕的大小（宽度/高度）和方向（纵向/横向）。每当这些配置发生变化时，build方法就会被调用，这确保widget树会被重建以反映最新的变化。

2、使用AspectRatio：AspectRatio是一个小部件，它会尝试将孩子的尺寸调整到一个特定的长宽比。小部件首先尝试布局限制所允许的最大宽度，然后通过对宽度应用给定的长宽比来确定高度，表示为宽度与高度的比率。

3、使用FlutterScreenUtil：FlutterScreenUtil是一个开源的 Flutter 库，它提供了一些方法来帮助开发者在不同的屏幕大小和设备上实现响应式设计。

MediaQuery的使用方法参考如下：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Info'),
        ),
        body: FirstWidget(),
      ),
    );
  }
}
 
class FirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("设备像素逻辑像素sp大小:${MediaQuery.of(context).size}"),//Size类型
        Text("设备像素逻辑像素sp大小:${MediaQuery.of(context).padding}"),
        Text("每个逻辑像素的设备像素数:${MediaQuery.of(context).devicePixelRatio}"),
        Text("每个逻辑像素的字体像素数:${MediaQuery.of(context).textScaleFactor}"),
        Text("格式化时间时是否使用24小时格式:${MediaQuery.of(context).alwaysUse24HourFormat}"),
        Text("是横屏还是竖屏:${MediaQuery.of(context).orientation}"),
        Text("设备的亮度模式:${MediaQuery.of(context).platformBrightness}"),
        Text("被系统遮挡的部分(通常指键盘):${MediaQuery.of(context).viewInsets}"),
        Text("被系统遮挡的部分(常指“刘海屏”或系统状态栏):${MediaQuery.of(context).padding}"),
        Text("当前窗口的宽度和高度:${MediaQuery.of(context).systemGestureInsets}"),
        Text("当前窗口的宽度和高度:${MediaQuery.of(context).textScaleFactor}"),
      ],
    );
  }
}
回到顶部