Flutter：屏幕适配方案揭秘，弹性布局，一劳永逸！

2023-11-10 08:19:51

Flutter 屏幕适配：使用 pt 单位的三种实用方案

作为移动端开发人员，你一定深知针对不同型号和尺寸的手机进行页面适配的重要性。然而，在 Flutter 中，使用 pt 作为单位给屏幕适配带来了新的挑战。本文将为你揭秘三种 Flutter 屏幕适配方案，助你轻松应对不同设备的适配问题。

方案一：使用 MediaQuery

MediaQuery 是 Flutter 中提供的一个类，它可以获取设备的屏幕信息，包括屏幕宽度、高度、像素密度等。使用 MediaQuery 可以轻松地获取设备的屏幕信息，并根据这些信息调整页面的布局。

比如，你可以这样获取屏幕宽度和高度：

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

方案二：使用 LayoutBuilder

LayoutBuilder 是 Flutter 中提供的一个控件，它可以获取父控件的约束信息，并根据这些约束信息调整子控件的布局。使用 LayoutBuilder 可以轻松地实现自适应布局，即子控件的布局可以根据父控件的大小自动调整。

你可以使用 LayoutBuilder 这样获取父控件的宽度和高度：

return LayoutBuilder(
  builder: (context, constraints) {
    double screenWidth = constraints.maxWidth;
    double screenHeight = constraints.maxHeight;

    return Scaffold(
      body: Center(
        child: Text('屏幕宽度：$screenWidth，屏幕高度：$screenHeight'),
      ),
    );
  },
);

方案三：使用 Sliver

Sliver 是 Flutter 中提供的一个控件，它可以用来构建滚动列表。Sliver 可以根据设备的屏幕大小自动调整滚动列表的布局，从而实现自适应布局。

比如，你可以使用 SliverAppBar 和 SliverList 构建一个自适应的滚动列表：

return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        title: Text('我的主页'),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
          childCount: 100,
        ),
      ),
    ],
  ),
);