Flutter预渲染页面插件prerender的使用

Flutter预渲染页面插件prerender的使用

Prerender小部件允许构建依赖于其他小部件大小的子树。

Flutter的渲染管道提供了父级大小信息，但在build方法中不允许计算其他小部件的大小。Prerender包通过在单个帧内测量一个小部件并延迟最终构建直到其尺寸已知来解决此问题。

入门指南

Prerender小部件通过以下几步解决其布局以访问目标的尺寸：

1. 渲染对象将target作为Prerender的唯一子项进行布局，允许目标填充父项。
2. 渲染对象存储计算出的尺寸，并调用builder函数，传递目标的解析尺寸。
3. builder回调根据之前计算的布局决定最终的子项小部件树形状。

重新构建具有不同目标小部件的树将导致builder再次被调用，并传递更新的目标尺寸。

使用方法

在pubspec.yaml中添加依赖：

dependencies:
  prerender: ^1.0.0

将依赖于某些小部件布局的小部件树包装起来：

Prerender(
  // 提供您想要测量的小部件：
  target: ...,
  // 使用计算出的布局构建实际的子项：
  builder: (context, childSize, child) {
    ...
  },
)

例如，仅当有足够的水平空间时才在标题前添加头像：

Prerender(
  target: Title(),
  builder: (context, childSize, child) {
    return Row(
      children: [
        if (childSize.width < 200) Avatar(),
        child,
      ],
    );
  },
)

单帧渲染

除了对构建小部件有更细粒度的控制外，使用Prerender的另一个关键优势是在单个帧内访问和使用其他小部件的尺寸信息：

// 使用 GlobalKey（命令式）
final titleKey = GlobalKey();

Widget build(BuildContext context) {
  var titleSize = Size.zero;
  final renderObject = titleKey.currentContext?.findRenderObject();
  if (renderObject != null) {
    titleSize = (renderObject as RenderBox).size;
  }

  return Row(
    children: [
      // 大小始终落后一个帧。
      if (titleSize.width < 200) Avatar(),
      Title(key: titleKey),
    ],
  );
}

// 使用 Prerender（声明式）
Widget build(BuildContext context) {
  return Prerender(
    target: Title(),
    builder: (context, childSize, child) {
      return Row(
        children: [
          if (childSize.width < 200) Avatar(),
          child,
        ],
      );
    },
  );
}

示例

扩展文本

仅在文本宽度大于可用水平区域时显示展开按钮。

固定底部

如果内容小于可用区域，则将底部按钮固定到屏幕底部边缘。

响应式表单

在折叠状态下，将底部表单的高度与主体的垂直尺寸对齐，以防止显示空白区域。

完整示例代码

import 'package:example/examples/expanding_text.dart';
import 'package:example/examples/responsive_sheet.dart';
import 'package:example/examples/sticking_footer.dart';
import 'package:flutter/material.dart';

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

class ExamplesApp extends StatefulWidget {
  const ExamplesApp({super.key});

  [@override](/user/override)
  State<ExamplesApp> createState() => _ExamplesAppState();
}

class _ExamplesAppState extends State<ExamplesApp> {
  final items = [
    ('扩展文本', const ExpandingTextExample()),
    ('固定底部', const StickingFooterExample()),
    ('响应式表单', const ResponsiveSheetExample()),
  ];

  late var currentItem = items.last;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: false,
          title: Text(currentItem.$1),
        ),
        drawer: Drawer(
          child: Column(
            children: [
              for (var (item) in items)
                DrawerItem(
                  title: item.$1,
                  onSelect: () {
                    setState(() => currentItem = item);
                  },
                ),
            ],
          ),
        ),
        body: currentItem.$2,
      ),
    );
  }
}

class DrawerItem extends StatelessWidget {
  const DrawerItem({
    super.key,
    required this.title,
    required this.onSelect,
  });

  final String title;
  final VoidCallback onSelect;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: () {
        onSelect();
        Scaffold.of(context).closeDrawer();
      },
    );
  }
}