【Chromium】View 与 Widget;Chromium UI Platform;View 类与 Widget 类

文章目录

    • Chromium UI Platform
    • views
    • Class
      • View Class
      • Widget Class

Chromium UI Platform

  • Chromium UI Platform
  • View 是一个UI元素,类似于HTML DOM元素。每个View 占据一个矩形,称为其边界,在其父View 的坐标系中表示。View 可以有子Views,它们根据View 的布局管理器进行布局,尽管单个View 也可以覆盖View::Layout来实现自己的布局逻辑。每个视图也可以有一个边框和/或一个背景。
    • 每个View 都可以计算出不同的尺寸,这些尺寸被View 的父View 用来决定如何定位和确定其大小。
    • 通常情况下,边界是由父View 的Layout方法或父View 的LayoutManager计算的,而不是手动显示的修改边界。
  • border
    • border通常是围绕View 的边界(bound)矩形绘制的,同时也定义了视图的内容边界(content bounds),这是绘制视图内容的区域。例如,一个位于[(0,0) 100x100]的视图有一个厚度为2的实心border,其内容边界为[(2,2) 96x96] 。
  • Background
    • 背景被画在View 的任何其他部分之下,包括border。任何View 都可以有一个背景,但大多数View 都没有。一个背景通常负责填充View 的整个边界。背景通常是一种颜色
  • Content
    • The content is the area inside the content bounds of the View. View的子View(如果它有的话)也被定位并绘制在View的内容边界内。没有代表View的内容区域的类;它只作为View的边框所包围的空间而存在,其形状由边框的嵌入物定义。
  • Layout & Layout Managers
    • View‘s layout manager 定义了View的子View应该如何在View的content范围内进行布局.
    • View有几个布局管理器。最简单的是FillLayout,它将一个View的所有子View布置在该View的整个内容范围内。FlexLayout为View的水平和垂直排列提供了一个类似于CSS的布局。
  • Painting
    • 视图是通过对视图树的预顺序遍历来绘制的–也就是说,父视图在其子视图之前被绘制。每个视图按Z顺序绘制其所有的子代,这由View::GetChildrenInZOrder()决定,所以Z顺序中的最后一个子代最后被绘制,因此在前面的子代之上。默认的z-order是孩子们被添加到父视图中的顺序。
    • 不同的视图子类在View::OnPaint中实现它们自己的绘制逻辑,默认情况下,它只是调用View::OnPaintBackground和View::OnPaintBorder。一般来说,View::OnPaint的子类实现从调用superclass 的View::OnPaint开始。
    • 如果你需要为一个视图子类提供特殊的Background 或Border ,最好是创建一个Background 或Border 的子类并安装它(继承?),而不是覆盖::OnPaintBackground或::OnPaintBorder。这样做有助于保持将视图分离成上述的三个部分,并使绘画代码更容易理解。
  • Widgets
    • View需要一个底层canvas 来绘制。这必须由操作系统提供,通常是通过创建某种本地 drawing surface ,View 称其为Widget。一个Widget是一个Views 树和某种本地窗口之间的桥梁,Views称之为本地Widget。每个Widget都有一个 root view,它是一个特殊的view子类,可以帮助实现这种桥接; root view又有一个单一的子view,称为Widget的contents view,它填充了整个 root view。一个给定的Widget内的所有其他 views 都是该Widget contents view的子视图。
    • Widgets 主要要做:
      • Keyboard focus management, via FocusManager
      • Window resizing/minimization/maximization
      • Window shaping, for non-rectangular windows
      • Input event routing
  • Client and Non-Client Views
    • 大多数Widgets的 contents view 是一个Non-Client View,,它要么是一个NonClientView,要么是它的一个后代。Non-Client View有两个子代,即Non-Client Frame View (一个NonClientFrameView)和Client Frame View(一个ClientView)。Non-Client Frame View负责绘制窗口装饰、Widget的边框、阴影等;Client Frame View则负责绘制Widget的content。Client Frame View 占用的区域有时被称为Widget的 “client area”。non-client frame view可以随着系统主题的改变而被替换,而不影响client view.
      【Chromium】View 与 Widget;Chromium UI Platform;View 类与 Widget 类_第1张图片

    • Dialogs

      • 一个常用的client view类型是dialog client view,,它有一个contents view,右下方有可选的按钮,左下方有可选的额外视图。对话框通常是通过子类化DialogDelegate或DialogDelegateView,然后调用DialogDelegate::CreateDialogWidget来创建。对话框的contents view 填满了widget’s client view的整个上半部分,而下半部分则被对话框的按钮和额外视图所占据。
//  +- views::Widget ------------------------------------+
//  | +- views::RootView ------------------------------+ |
//  | | +- views::NonClientView ---------------------+ | |
//  | | | +- views::NonClientFrameView subclass ---+ | | |
//  | | | |                                        | | | |
//  | | | | << all painting and event receiving >> | | | |
//  | | | | << of the non-client areas of a     >> | | | |
//  | | | | << views::Widget.                   >> | | | |
//  | | | |                                        | | | |
//  | | | | +- views::ClientView or subclass ----+ | | | |
//  | | | | |                                    | | | | |
//  | | | | | << all painting and event       >> | | | | |
//  | | | | | << receiving of the client      >> | | | | |
//  | | | | | << areas of a views::Widget.    >> | | | | |
//  | | | | +------------------------------------+ | | | |
//  | | | +----------------------------------------+ | | |
//  | | +--------------------------------------------+ | |
//  | +------------------------------------------------+ |
//  +----------------------------------------------------+

views

  • views

  • user interfaces由一个组件树组成,称作 views 。(树上的每个view 代表了用户界面的一个不同组件)(就像是HTML 的分层结构)

    • 代码目录:src/ui/views/
    • views 负责rendering, layout, and event handling。
    • 在View hierarchy 的根部是一个Widget,它是一个native window 。native window 接收来自Windows的消息,将其转换为View hierarchy可以理解的内容,然后将其传递给RootView。然后,RootView开始将事件传播到View hierarchy 中。
    • Painting and layout 以类似的方式进行的。View tree 中的一个View 有它自己的边界(通常由其包含的View 的布局方法赋予它),因此当它被要求画图时,它将画在一个与其边界相接的画布上,渲染的原点被转换到View 的左上方。当Widget收到Paint消息时,整个View树的渲染是在一个由Widget设置和拥有的单一画布中进行的。
    • 渲染本身是通过对Skia和GDI的调用 来完成的,GDI用于文本,Skia用于其他的东西。
  • Chromium的用户界面中的一些UI控件并不是使用View渲染的,它们是托管在一种特殊的视图中的本地Windows控件,这种视图知道如何显示和调整本地小部件的大小。因为它们使用本地控件,所以这些视图也不是可移植的,也许在API中除外。

    • 除了特定平台的渲染代码、基于系统指标的尺寸代码等,View系统的其余部分基本可移植,因为大多数渲染是使用跨平台的Skia库完成的。由于历史原因,View的许多函数采用Windows或ATL类型,但现在使用许多平台独立的类型增强了ui/gfx/,最终可以用这些类型取代它们。

Class

View Class

  • view.h
  • View 是视图层次结构中的一个矩形。它是所有Views 的基类。
  • 一个View 是其他Views 的容器(container )
  • View 包含大小(边界)、布局(弯曲、方向等)、绘制 Child 和事件调度的基本属性。

Widget Class

  • widget.h
  • Widget is a platform-independent type that communicates with a platform or context specific NativeWidget implementation.
  • Widget是一个独立于平台的类型,它与平台或上下文特定的NativeWidget实现进行通信
  • 根据InitParams的所有权字段的值,Widget拥有NativeWidgetownership = WIDGET_OWNS_NATIVE_WIDGET (非默认),或者被NativeWidget所拥有ownership = NATIVE_WIDGET_OWNS_WIDGET (默认)

你可能感兴趣的:(chromium,chromium,View,Widget)