Flutter完整开发实战详解(七、 深入布局原理)，Android面试送分题

是的，RenderConstrainedBox 就是继承自 RenderBox，从而实现RenderObject 的布局，这里我们得到了它们的关系如下 ：

Widget	RenderObject
ConstrainedBox	RenderConstrainedBox

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZT11R5NU-1630844737183)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da31e16056ce?imageView2/0/w/1280/h/960/ignore-error/1)]

然后我们继续对其他每个 Widget 进行观察，可以看到它们也都是继承SingleChildRenderObjectWidget ，而“简单来说”它们不同的地方就是 RenderObject 的实现了：

Widget	RenderBox （RenderObject）
Align	RenderPositionedBox
Padding	RenderPadding
Transform	RenderTransform
Offstage	RenderOffstage

所以我们可以总结：真正的布局和大小计算等行为，都是在 RenderBox 上去实现的。 不同的 Widget 通过各自的 RenderBox 实现了“差异化”的布局效果。所以找每个 Widget 的实现，找它的 RenderBox 实现就可以了。（当然，另外还有 RenderSliver，这里暂时不讨论）

这里我们通过 Offstage 这个Widget 小结下，Offstage 这个 Widget 是通过 offstage 标志控制 child 是否显示的效果，同样的它也有一个 RenderOffstage ，如下图，通过 RenderOffstage 的源码我们可以“真实”看到 offstage 标志位的作用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0KxjDCVV-1630844737185)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da31db0aa48e?imageView2/0/w/1280/h/960/ignore-error/1)]

所以大部分时候，我们的 Widget 都是通过实现 RenderBox 实现布局的 ，那我们可不可抛起 Widget 直接用 RenderBox呢？答案明显是可以的，如果你闲的🥚疼的话！

Flutter 官方为了治疗我们“🥚疼”，提供了一个叫 CustomSingleChildLayout 的类，它抽象了一个叫 SingleChildLayoutDelegate 的对象，让你可以更方便的操作 RenderBox 来达到自定义的效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tQunpXKJ-1630844737187)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da31e155088a?imageView2/0/w/1280/h/960/ignore-error/1)]

如下图三张源码所示，SingleChildLayoutDelegate 的对象提供以下接口，并且接口 前三个 是按照顺序被调用的，通过实现这个接口，你就可以轻松的控制RenderBox 的 布局位置、大小 等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kArIUhMK-1630844737190)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da31dec80115?imageView2/0/w/1280/h/960/ignore-error/1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AvmF0ren-1630844737192)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da31e1336780?imageView2/0/w/1280/h/960/ignore-error/1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsBPVABc-1630844737193)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da320095c796?imageView2/0/w/1280/h/960/ignore-error/1)]

二、多子元素布局

事实上“多子元素布局”和单子元素类似，通过“举一反三”我们就可以知道它们的关系了，比如：

• Row、Colum 都继承了 Flex，而 Flex 继承了MultiChildRenderObjectWidget 并通过 RenderFlex 创建了 RenderBox；
• Stack 同样继承 MultiChildRenderObjectWidget 并通过 RenderStack 创建了 RenderBox；

Widget	RenderBox （RenderObject）
Row/Colum/Flex	RenderFlex
Stack	RenderStack
Flow	RenderFlow
Wrap	RenderWrap

同样“多子元素布局”也提供了 CustomMultiChildLayout 和 MultiChildLayoutDelegate 满足你的“🥚疼”需求。

三、多子元素滑动布局

滑动布局作为 “多子元素布局” 的另一个分支，如 ListView 、GridView、Pageview ，它们在实现上要复杂的多，从下图一个的流程上我们大致可以知道它们的关系：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfWxtuYi-1630844737194)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da3207cdb8ca?imageView2/0/w/1280/h/960/ignore-error/1)]

由上图我们可以知道，流程最终回产生两个 RenderObject ：

• RenderSliver ：Base class for the render objects that implement scroll effects in viewports.

• RenderViewport ：A render object that is bigger on the inside.

/// [RenderViewport] cannot contain [RenderBox] children directly. Instead, use
/// a [RenderSliverList], [RenderSliverFixedExtentList], [RenderSliverGrid], or
/// a [RenderSliverToBoxAdapter], for example. 

并且从 RenderViewport的说明我们知道，RenderViewport内部是不能直接放置 RenderBox，需要通过 RenderSliver 大家族来完成布局。而从源码可知：RenderViewport 对应的 Widget Viewport 就是一个 MultiChildRenderObjectWidget。 （你看，又回到 MultiChildRenderObjectWidget 了吧。）

再稍微说下上图的流程：

• ListView、Pageview、GridView 等都是通过 Scrollable 、 ViewPort、Sliver大家族实现的效果。这里简单不规范描述就是：一个“可滑动”的控件，嵌套了一个“视觉窗口”，然后内部通过“碎片”展示 children 。

• 不同的是 PageView 没有继承 SrollView，而是直接通过 NotificationListener 和 ScrollNotification 嵌套实现。

注意 TabBarView 内部就是：NotificationListener + PageView

是不是觉得少了什么？哈哈哈，有的有的，官方同样提供了解决“🥚疼”的自定义滑动 CustomScrollView ，它继承了 ScrollView，可通过 slivers 参数实现布局，这些 slivers 最终回通过 Scrollable 的 buildViewport 添加到 ViewPort 中，如下代码所示：

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
# 最后

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

上面分享的**百度、腾讯、网易、字节跳动、阿里等公司2021年的高频面试题**，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含**知识脉络 + 诸多细节**，由于篇幅有限，上面只是以图片的形式给大家展示一部分。

**[CodeChina开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》](https://codechina.csdn.net/m0_60958482/android_p7)**

**【Android思维脑图（技能树）】**

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

![](https://img-blog.csdnimg.cn/img_convert/9b761b5cef0b8749e9bf9491bfb1fbb3.png)

**【Android高级架构视频学习资源】**

】**

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

[外链图片转存中...(img-hU6cpJOj-1630844737194)]

**【Android高级架构视频学习资源】**

**Android部分精讲视频领取学习后更加是如虎添翼！**进军BATJ大厂等（备战）！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水，赶快领取吧！