客户端不同世界的渲染之旅：Android&Flutter&IOS

甜瓜看代码

已于 2023-05-21 19:00:16 修改

阅读量196

点赞数

文章标签： android flutter ios

于 2023-05-21 18:57:56 首次发布

本文链接：https://blog.csdn.net/m0_69656288/article/details/130795179

版权

嗨！这里是甜瓜看代码。今天这篇文章我们来聊聊客户端的渲染过程。

安卓

让我们先从安卓开始。在普通Activity中，视图的渲染过程主要分为两个阶段：布局和绘制。

布局阶段

在布局阶段，Activity会根据XML布局文件来构建视图层次结构。在这个阶段，系统会遍历XML文件，根据标记和属性创建相应的视图对象，并将它们组织成一个树形结构。

下面是一个简单的XML布局文件的例子：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" />

</LinearLayout>

在这个例子中，我们使用LinearLayout作为根布局，它包含一个TextView作为子视图。在布局阶段，系统会创建一个LinearLayout对象和一个TextView对象，并将它们关联起来形成视图层次结构。

绘制阶段

在布局阶段完成后，系统会进入绘制阶段。在这个阶段，系统会遍历视图层次结构，并按照一定的规则进行绘制。绘制的过程涉及到测量、布局和绘制三个步骤。

测量（Measure）：系统会测量每个视图的大小，以确定它们在屏幕上的位置和尺寸。这个过程通过调用视图对象的measure()方法实现。
布局（Layout）：系统会根据测量结果，确定每个视图在父容器中的布局位置。这个过程通过调用视图对象的layout()方法实现。
绘制（Draw）：系统会按照布局阶段计算得到的位置和尺寸信息，将每个视图绘制到屏幕上。这个过程通过调用视图对象的draw()方法实现。

在Activity中，绘制过程是在主线程上进行的，因此如果视图层次结构复杂或者绘制操作耗时较长，就可能导致UI卡顿的问题。为了避免这种情况，我们通常会对绘制过程进行优化，例如使用异步任务或者将耗时的绘制操作放在后台线程中执行。

Flutter

现在，让我们转向FlutterActivity的渲染过程。作为Flutter的专属角色，它带来了一种全新的视图渲染方式。

Flutter引擎的威力

FlutterActivity利用了Flutter引擎的强大能力来实现视图渲染。Flutter采用了自绘UI的方式，即将整个应用的视图渲染交给Flutter引擎来处理。

在Flutter中，视图的渲染过程也可以分为两个阶段：布局和绘制。但与普通Activity不同的是，Flutter的布局和绘制是在Flutter引擎中完成的，而不是依赖于Android系统。

布局阶段

在布局阶段，Flutter使用Widget来构建视图层次结构。我们知道Widget是Flutter的基本元素，它们可以是按钮、文本、图片等各种元素。通过组合不同的Widget，我们可以构建出丰富多样的用户界面。

下面是一个简单的Flutter代码示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, Flutter!'),
        ),
        body: Center(
          child: Text('Welcome to Flutter!'),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了MaterialApp、Scaffold、AppBar和Text等Widget来构建用户界面。每个Widget都有自己的属性和布局规则，它们以树状结构组织起来形成了视图层次结构。

绘制阶段

在布局阶段完成后，Flutter引擎会根据Widget树来进行绘制。与普通Activity不同的是，Flutter的绘制是通过Skia引擎进行的，它是一个高性能的2D图形库。

绘制过程中，Flutter引擎会遍历Widget树，根据每个Widget的属性和布局规则来计算最终的绘制结果。与普通Activity相比，Flutter的绘制过程是高度优化的，可以利用GPU进行硬件加速，从而获得更高的性能和流畅的动画效果。

由于Flutter的绘制过程是在Flutter引擎中完成的，所以它具有独立于平台的特性。这意味着无论是在Android还是iOS上运行，Flutter的视图渲染效果都是一致的，保证了跨平台应用的一致性和可移植性。

iOS

最后我们再介绍一下iOS中的视图渲染方式，即View Controller。在iOS中，View Controller负责管理和渲染视图。

视图层次结构

与Android的布局文件和Flutter的Widget树不同，iOS中的视图层次结构是通过视图对象（View）和容器对象（Container）的层次关系来组织的。视图对象代表具体的UI元素，例如按钮、标签等，而容器对象则用于组织和布局这些视图对象。

以下是一个简单的iOS代码示例：

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "Hello, iOS!"
        label.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        
        self.view.addSubview(label)
    }
}