Flutter核心库rendering详解

rendering是Flutter的一个核心库，它提供了一些用于绘制和布局的类和接口，用于实现各种视觉效果。下面是rendering库中常用的类和接口：

• RenderObject：一个表示可绘制对象的接口。RenderObject包含了可绘制对象的各种属性和方法，如尺寸、位置、绘制方法等，可以用来实现各种自定义绘制效果。
• RenderBox：一个表示可布局对象的接口。RenderBox是RenderObject的子类，添加了一些与布局相关的属性和方法，如最小、最大尺寸、子元素等，可以用来实现各种自定义布局效果。
• RenderFlex：一个实现弹性布局的类。RenderFlex可以实现类似于CSS中flexbox的弹性布局效果，用于实现各种复杂的布局效果。
• RenderPositionedBox：一个实现绝对定位布局的类。RenderPositionedBox可以实现类似于CSS中position: absolute的绝对定位布局效果，用于实现一些浮动、悬浮等效果。
• RenderViewport：一个实现可滚动视图的类。RenderViewport可以实现类似于iOS上的UIScrollView的滚动视图效果，用于实现各种可滚动的视图效果。

下面是一个简单的使用RenderBox和RenderPositionedBox实现绝对定位布局效果的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rendering App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rendering App'),
      ),
      body: Center(
        child: Stack(
          children: [
            Positioned(
              top: 50,
              left: 50,
              child: RenderPositionedBox(
                child: Text('Hello, world!'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RenderPositionedBox extends RenderBox {
  RenderPositionedBox({RenderBox child}) {
    this.child = child;
  }

  @override
  void performLayout() {
    if (child != null) {
      child.layout(constraints);
      size = child.size;
    } else {
      size = Size.zero;
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    if (child != null) {
      context.paintChild(child, offset);
    }
  }
}

该示例使用了RenderBox和RenderPositionedBox来实现绝对定位布局效果。RenderPositionedBox是一个自定义的RenderBox，用于实现类似于CSS中position: absolute的绝对定位布局效果。它的构造函数接收一个RenderBox类型的child，并将该子元素相对于其父元素进行绝对定位。在performLayout方法中，它首先通过child.layout(constraints)方法对子元素进行布局计算，然后设置自身的size为子元素的size。在paint方法中，它使用context.paintChild(child, offset)`方法将子元素绘制到屏幕上。

在MyHomePage的body中，我们使用了一个Stack来包含一个绝对定位的RenderPositionedBox，并将top和left属性设置为50，从而使文本框向右下方偏移50个像素。最终，该示例将在屏幕正中央绘制一个向右下方偏移50个像素的文本框。

rendering库提供了各种可重用的类和接口，用于实现各种自定义绘制和布局效果。如果你希望在Flutter应用中实现一些定制化的视觉效果，那么rendering库是一个非常有用的工具库。