美文网首页
Android 中 View 的绘制原理

Android 中 View 的绘制原理

作者: 零星瓢虫 | 来源:发表于2020-06-30 00:02 被阅读0次

    在 Android 的知识体系中,View 扮演着很重要的角色。只有对 View 的相关机制深入理解之后,才能通过自定义 View 实现各种效果,以及处理开发中遇到的各种问题。

    我们知道 View 的绘制过程有三大重要的过程,即 View 的 measure 、layout 和 draw 过程。在 Android 中 Activity Window ViewRootImpl 的关联 这篇文章中,我们知道 ViewRootImpl 类是绑定 View 和 Window 中重要的一环, 而View 的绘制过程就是从从 ViewRootImpl 中开始的:

    root = new ViewRootImpl(view.getContext(), display);
    root.setView(view, wparams, panelParentView);
    

    ViewRootImpl 的 setView 方法最终会调用到 performTraversals 方法开始 View 的绘制工作。绘制的大致流程可用下图来表示。

    View 绘制过程

    performTraversals 方法会依次调用 performMeasure、performLayout 和 performDraw 方法。三个方法分别调用顶级 View 的 measure、layout 和 draw 方法。而在 ViewGroup 的 performMeasure 方法中会调用到 measure 方法,measure 方法调用 onMeasure 方法。在 onMeasure 方法中遍历子类的 measure 方法。
    同理 layout 和 draw 方法与此类似。

    我们知道 ,顶层 View 即为 DecorView ,而 DecorView 继承于 FrameLayout,所以绘制过程从 FrameLayout 开始。

    在了解绘制 Measure 任务开始之前,首先介绍一下和测量紧密相关的类 MeasureSpec:

        public static class MeasureSpec {
            private static final int MODE_SHIFT = 30;
            private static final int MODE_MASK  = 0x3 << MODE_SHIFT;
            public static final int UNSPECIFIED = 0 << MODE_SHIFT;
            public static final int EXACTLY     = 1 << MODE_SHIFT;
            public static final int AT_MOST     = 2 << MODE_SHIFT;
    
            public static int makeMeasureSpec(int size, int mode) {
                if (sUseBrokenMakeMeasureSpec) {
                    return size + mode;
                } else {
                    return (size & ~MODE_MASK) | (mode & MODE_MASK);
                }
            }
    
            public static int getMode(int measureSpec) {
                return (measureSpec & MODE_MASK);
            }
    
            public static int getSize(int measureSpec) {
                return (measureSpec & ~MODE_MASK);
            }
          ......
    }
    
    

    MeasureSpec 封装了一个 32 位的 int 值,其中高 2 位表示 SpecMode ,低 30 位表示 SpecSize。SpecMode 指的是测量模式,SpecSize 表示测量规格的大小。 SpecMode 和 SpecSize 打包在一起构成 MeasureSpec。

    SpecMode 有三类:

    UNSPECIFIED

    对 view没有任何限制,要多大给多大。一般用于系统内部。

    EXACTLY

    给出了测出 View 所需要的精确大小,这个时候子 View 的最终大小就是 SpecSize 对应的值。一般对应 LayoutParams 中的 match_parent 和具体的数值大小。

    AT_MOST

    指定了一个可用大小 SpecSize, View 的大小不能大于这个值,具体值需要查看对应子 View 具体的实现。对应 LayoutParams 中的 warp_content。

    上面说到 MeasureSpec 和 View 的测量相关,正常情况下使用 View 都会使用 MeasureSpec,同时我们也可以给 View 设置 LayoutParams。而 View 最终的宽高测量 MeasureSpec 由自己 LayoutParams 和 父容器的 MeasureSpec 一起确定的。

    接下来去查看具体的测量过程,既然绘制过程 ViewRootImpl 开始,查看 ViewRootImpl 的 performMeasure 方法:

        private void performMeasure(int childWidthMeasureSpec, int childHeightMeasureSpec) {
            Trace.traceBegin(Trace.TRACE_TAG_VIEW, "measure");
            try {
                mView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
            } finally {
                Trace.traceEnd(Trace.TRACE_TAG_VIEW);
            }
        }
    

    performMeasure 会调用到 View 的 measure 方法,我们知道 mView 是 DecorView,而 DecorView 继承自 FragmentLayout。而 FragmentLayout 的 measure 方法的最终实现类在 View 中:

        public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
           ......
    
            final boolean forceLayout = (mPrivateFlags & PFLAG_FORCE_LAYOUT) == PFLAG_FORCE_LAYOUT;
            final boolean isExactly = MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY &&
                    MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY;
            final boolean matchingSize = isExactly &&
                    getMeasuredWidth() == MeasureSpec.getSize(widthMeasureSpec) &&
                    getMeasuredHeight() == MeasureSpec.getSize(heightMeasureSpec);
            if (forceLayout || !matchingSize &&
                    (widthMeasureSpec != mOldWidthMeasureSpec ||
                            heightMeasureSpec != mOldHeightMeasureSpec)) {
    
                // first clears the measured dimension flag
                mPrivateFlags &= ~PFLAG_MEASURED_DIMENSION_SET;
    
                resolveRtlPropertiesIfNeeded();
    
                int cacheIndex = forceLayout ? -1 : mMeasureCache.indexOfKey(key);
                if (cacheIndex < 0 || sIgnoreMeasureCache) {
                    // measure ourselves, this should set the measured dimension flag back
                    onMeasure(widthMeasureSpec, heightMeasureSpec);
                    mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
                } else {
                    long value = mMeasureCache.valueAt(cacheIndex);
                    // Casting a long to int drops the high 32 bits, no mask needed
                    setMeasuredDimensionRaw((int) (value >> 32), (int) value);
                    mPrivateFlags3 |= PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
                }
    
                // flag not set, setMeasuredDimension() was not invoked, we raise
                // an exception to warn the developer
                if ((mPrivateFlags & PFLAG_MEASURED_DIMENSION_SET) != PFLAG_MEASURED_DIMENSION_SET) {
                    throw new IllegalStateException("onMeasure() did not set the"
                            + " measured dimension by calling"
                            + " setMeasuredDimension()");
                }
    
                mPrivateFlags |= PFLAG_LAYOUT_REQUIRED;
            }
    
            mOldWidthMeasureSpec = widthMeasureSpec;
            mOldHeightMeasureSpec = heightMeasureSpec;
    
            mMeasureCache.put(key, ((long) mMeasuredWidth) << 32 |
                    (long) mMeasuredHeight & 0xffffffffL); // suppress sign extension
        }
    

    这里会判断有没有设置 PFLAG_FORCE_LAYOUT ,如果没有设置并且 mMeasureCache 有缓存,会继续调用 onMeasure 方法,这里就会回到上层 FragmentLayout 中的 onMeasure 方法:

     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int count = getChildCount();
    
            final boolean measureMatchParentChildren =
                    MeasureSpec.getMode(widthMeasureSpec) != MeasureSpec.EXACTLY ||
                    MeasureSpec.getMode(heightMeasureSpec) != MeasureSpec.EXACTLY;
            mMatchParentChildren.clear();
    
            int maxHeight = 0;
            int maxWidth = 0;
            int childState = 0;
    
            for (int i = 0; i < count; i++) {
                final View child = getChildAt(i);
                if (mMeasureAllChildren || child.getVisibility() != GONE) {
                    measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0);
                    final LayoutParams lp = (LayoutParams) child.getLayoutParams();
                    maxWidth = Math.max(maxWidth,
                            child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
                    maxHeight = Math.max(maxHeight,
                            child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
                    childState = combineMeasuredStates(childState, child.getMeasuredState());
                    if (measureMatchParentChildren) {
                        if (lp.width == LayoutParams.MATCH_PARENT ||
                                lp.height == LayoutParams.MATCH_PARENT) {
                            mMatchParentChildren.add(child);
                        }
                    }
                }
            }
        ......
    
        // Account for padding too
            maxWidth += getPaddingLeftWithForeground() + getPaddingRightWithForeground();
            maxHeight += getPaddingTopWithForeground() + getPaddingBottomWithForeground();
    
            // Check against our minimum height and width
            maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
            maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
    
            // Check against our foreground's minimum height and width
            final Drawable drawable = getForeground();
            if (drawable != null) {
                maxHeight = Math.max(maxHeight, drawable.getMinimumHeight());
                maxWidth = Math.max(maxWidth, drawable.getMinimumWidth());
            }
    
            setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
                    resolveSizeAndState(maxHeight, heightMeasureSpec,
                            childState << MEASURED_HEIGHT_STATE_SHIFT));
    }
    
    

    onMeasure 方法会遍历子类,并调用 measureChildWithMargin 方法,而且 FragmentLayout 的测量会依赖于子类的测量宽高进行叠加并最终调用 setMeasuredDimension 方法完成自己的测量,先进行查看 measureChildWithMargin 方法:

        protected void measureChildWithMargins(View child,
                int parentWidthMeasureSpec, int widthUsed,
                int parentHeightMeasureSpec, int heightUsed) {
            final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
    
            final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
                    mPaddingLeft + mPaddingRight + lp.leftMargin + lp.rightMargin
                            + widthUsed, lp.width);
            final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
                    mPaddingTop + mPaddingBottom + lp.topMargin + lp.bottomMargin
                            + heightUsed, lp.height);
    
            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        }
    

    在对子元素进行 measure 测量之前,会通过 getChildMeasureSpec 方法 获取到子元素的 MeasureSpec 值,

        public static int getChildMeasureSpec(int spec, int padding, int childDimension) {
            int specMode = MeasureSpec.getMode(spec);
            int specSize = MeasureSpec.getSize(spec);
    
            int size = Math.max(0, specSize - padding);
    
            int resultSize = 0;
            int resultMode = 0;
    
            switch (specMode) {
            // Parent has imposed an exact size on us
            case MeasureSpec.EXACTLY:
                if (childDimension >= 0) {
                    resultSize = childDimension;
                    resultMode = MeasureSpec.EXACTLY;
                } else if (childDimension == LayoutParams.MATCH_PARENT) {
                    // Child wants to be our size. So be it.
                    resultSize = size;
                    resultMode = MeasureSpec.EXACTLY;
                } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                    // Child wants to determine its own size. It can't be
                    // bigger than us.
                    resultSize = size;
                    resultMode = MeasureSpec.AT_MOST;
                }
                break;
    
            // Parent has imposed a maximum size on us
            case MeasureSpec.AT_MOST:
                if (childDimension >= 0) {
                    // Child wants a specific size... so be it
                    resultSize = childDimension;
                    resultMode = MeasureSpec.EXACTLY;
                } else if (childDimension == LayoutParams.MATCH_PARENT) {
                    // Child wants to be our size, but our size is not fixed.
                    // Constrain child to not be bigger than us.
                    resultSize = size;
                    resultMode = MeasureSpec.AT_MOST;
                } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                    // Child wants to determine its own size. It can't be
                    // bigger than us.
                    resultSize = size;
                    resultMode = MeasureSpec.AT_MOST;
                }
                break;
    
            // Parent asked to see how big we want to be
            case MeasureSpec.UNSPECIFIED:
                if (childDimension >= 0) {
                    // Child wants a specific size... let him have it
                    resultSize = childDimension;
                    resultMode = MeasureSpec.EXACTLY;
                } else if (childDimension == LayoutParams.MATCH_PARENT) {
                    // Child wants to be our size... find out how big it should
                    // be
                    resultSize = 0;
                    resultMode = MeasureSpec.UNSPECIFIED;
                } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                    // Child wants to determine its own size.... find out how
                    // big it should be
                    resultSize = 0;
                    resultMode = MeasureSpec.UNSPECIFIED;
                }
                break;
            }
            return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
        }
    

    上述方法,主要就是根据父容器的 MeasureSpec 同时结合子 View 本身的 LayoutParams 来确定子元素的 MeasureSpec 。

    针对上面的确定规则,可以用一张表进行梳理:

    MeasureSpec的测量

    针对 View 的 MeasureSpec 的测量,前面提到,普通 View 的 MeasureSpec 是由父容器的 MeasureSpec 和 自身的 LayoutParams 共同确定的。那么针对不同的父容器 和 View 本身不同的 LayoutParams,View 可以有多种 MeasureSpec:
    1 View 的设置固定宽高的时候 ,不管父容器 MeasureSpec 是什么,View 本身 MeasureSpec 都遵从精准模式,且大小是设置的大小。
    2 当 View 的宽高设置是 match_parent 的时候,如果父容器是精准模式,那么 View 也是精准模式并且大小和父容器剩余空间一样大,如果父容器是最大模式,那么 View 也是最大模式并且大小不超过父容器的最大空间。
    3 当 View 设置宽高为 warp_content 的时候,不管父容器是精准模式还是最大化模式,View总是最大化模式,且大小不能超过父容器的剩余空间。

    获取了View 的 MeasureSpec 数据之后,继续去调用子类 View 的 measure 方法:

    继续调用子类 View 的 measure 方法,和上述 measure 方法调用一样,此时一定会再次调用到 onMeasure方法,上面因为 FragmentLayout 重写了 onMeasure 方法,所以调用到 FragmentLayout 的 onMeasure 方法,如果此时的 View 没有重写 onMeasure,则进入到 View 自己的 onMeasure 方法中:

        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
                    getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
        }
    

    setMeasuredDimension 方法会设置 View 的测量值,只需要看 getDefaultSize 方法:

        public static int getDefaultSize(int size, int measureSpec) {
            int result = size;
            int specMode = MeasureSpec.getMode(measureSpec);
            int specSize = MeasureSpec.getSize(measureSpec);
    
            switch (specMode) {
            case MeasureSpec.UNSPECIFIED:
                result = size;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
            }
            return result;
        }
    

    getDefaultSize 针对 AT_MOST 和 EXACTLY 两个模式,获取到的 size 其实就是我们测量出来的大小。UNSPECIFIED 一般用内部测量。

    getSuggestedMinimumWidth 方法会根据 View 是否设置背景以及设置的相关 minWidth 和 maxWidth 属性来获取最小值,如果没有进行设置就是测量值的大小。

        protected int getSuggestedMinimumWidth() {
            return (mBackground == null) ? mMinWidth : max(mMinWidth, mBackground.getMinimumWidth());
        }
    

    到这里 View 的 measure 测量流程走完。会遍历完成所有子类的方法完成测量,并最终叠加计算完成 FragmentLayout 自己的测量,在上述流程已经提到过。

    同理,接下来类似继续以 DecorView 往下调用查看 performLayout 的方法:

     private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
                int desiredWindowHeight) {
           ......
            final View host = mView;
            if (DEBUG_ORIENTATION || DEBUG_LAYOUT) {
                Log.v(TAG, "Laying out " + host + " to (" +
                        host.getMeasuredWidth() + ", " + host.getMeasuredHeight() + ")");
            }
    
            Trace.traceBegin(Trace.TRACE_TAG_VIEW, "layout");
            try {
                host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());
    
               
                        if (validLayoutRequesters != null) {
                            final ArrayList<View> finalRequesters = validLayoutRequesters;
                            // Post second-pass requests to the next frame
                            getRunQueue().post(new Runnable() {
                                @Override
                                public void run() {
                                    int numValidRequests = finalRequesters.size();
                                    for (int i = 0; i < numValidRequests; ++i) {
                                        final View view = finalRequesters.get(i);
                                        Log.w("View", "requestLayout() improperly called by " + view +
                                                " during second layout pass: posting in next frame");
                                        view.requestLayout();
                                    }
                                }
                            });
                        }
                    }
    
                }
            } finally {
                Trace.traceEnd(Trace.TRACE_TAG_VIEW);
            }
            mInLayout = false;
        }
    

    和 measure 方法类似,可以直接去看 View 类中的 layout 方法:

        public void layout(int l, int t, int r, int b) {
            if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
                onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
                mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
            }
    
            int oldL = mLeft;
            int oldT = mTop;
            int oldB = mBottom;
            int oldR = mRight;
    
            boolean changed = isLayoutModeOptical(mParent) ?
                    setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);
    
            if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
                onLayout(changed, l, t, r, b);
                mPrivateFlags &= ~PFLAG_LAYOUT_REQUIRED;
    
                ListenerInfo li = mListenerInfo;
                if (li != null && li.mOnLayoutChangeListeners != null) {
                    ArrayList<OnLayoutChangeListener> listenersCopy =
                            (ArrayList<OnLayoutChangeListener>)li.mOnLayoutChangeListeners.clone();
                    int numListeners = listenersCopy.size();
                    for (int i = 0; i < numListeners; ++i) {
                        listenersCopy.get(i).onLayoutChange(this, l, t, r, b, oldL, oldT, oldR, oldB);
                    }
                }
            }
    
            mPrivateFlags &= ~PFLAG_FORCE_LAYOUT;
            mPrivateFlags3 |= PFLAG3_IS_LAID_OUT;
        }
    

    上述代码主要通过 setFrame 方法对比 View 前后 layout 有没有变化,如果有变化调用到 DecorView 的 父类 FragmentLayout 中的 onLayout 方法:

        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            layoutChildren(left, top, right, bottom, false /* no force left gravity */);
        }
    
        void layoutChildren(int left, int top, int right, int bottom,
                                      boolean forceLeftGravity) {
            final int count = getChildCount();
    
            final int parentLeft = getPaddingLeftWithForeground();
            final int parentRight = right - left - getPaddingRightWithForeground();
    
            final int parentTop = getPaddingTopWithForeground();
            final int parentBottom = bottom - top - getPaddingBottomWithForeground();
    
            mForegroundBoundsChanged = true;
            
            for (int i = 0; i < count; i++) {
                final View child = getChildAt(i);
                if (child.getVisibility() != GONE) {
                    final LayoutParams lp = (LayoutParams) child.getLayoutParams();
    
                    final int width = child.getMeasuredWidth();
                    final int height = child.getMeasuredHeight();
    
                    int childLeft;
                    int childTop;
    
                    int gravity = lp.gravity;
                    if (gravity == -1) {
                        gravity = DEFAULT_CHILD_GRAVITY;
                    }
    
                    final int layoutDirection = getLayoutDirection();
                    final int absoluteGravity = Gravity.getAbsoluteGravity(gravity, layoutDirection);
                    final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK;
    
                    switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) {
                        case Gravity.CENTER_HORIZONTAL:
                            childLeft = parentLeft + (parentRight - parentLeft - width) / 2 +
                            lp.leftMargin - lp.rightMargin;
                            break;
                        case Gravity.RIGHT:
                            if (!forceLeftGravity) {
                                childLeft = parentRight - width - lp.rightMargin;
                                break;
                            }
                        case Gravity.LEFT:
                        default:
                            childLeft = parentLeft + lp.leftMargin;
                    }
    
                    switch (verticalGravity) {
                        case Gravity.TOP:
                            childTop = parentTop + lp.topMargin;
                            break;
                        case Gravity.CENTER_VERTICAL:
                            childTop = parentTop + (parentBottom - parentTop - height) / 2 +
                            lp.topMargin - lp.bottomMargin;
                            break;
                        case Gravity.BOTTOM:
                            childTop = parentBottom - height - lp.bottomMargin;
                            break;
                        default:
                            childTop = parentTop + lp.topMargin;
                    }
    
                    child.layout(childLeft, childTop, childLeft + width, childTop + height);
                }
            }
        }
    

    看过 measure 测量之后这里就更好理解了,同样遍历子类,然后再去调用子类的 layout 方法,直至整 过程完成。这里的 layout 进行布局是 FragmentLayout 的方式,像 LinerLayout 和 RealativeLayout 的 onLayout 的实现方式又会不一样。具体可以自行研究。如果是自定义 View 则需根据需求来进行编写。

    继续调用 draw 方法进行绘制。

    有了上面的流程解析,这里就可以直接定位去看 View 中的 draw 方法:

        public void draw(Canvas canvas) {
            final int privateFlags = mPrivateFlags;
            final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
                    (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
            mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
    
            /*
             * Draw traversal performs several drawing steps which must be executed
             * in the appropriate order:
             *
             *      1. Draw the background
             *      2. If necessary, save the canvas' layers to prepare for fading
             *      3. Draw view's content
             *      4. Draw children
             *      5. If necessary, draw the fading edges and restore layers
             *      6. Draw decorations (scrollbars for instance)
             */
    
            // Step 1, draw the background, if needed
            int saveCount;
    
            if (!dirtyOpaque) {
                drawBackground(canvas);
            }
    
            // skip step 2 & 5 if possible (common case)
            final int viewFlags = mViewFlags;
            boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
            boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
            if (!verticalEdges && !horizontalEdges) {
                // Step 3, draw the content
                if (!dirtyOpaque) onDraw(canvas);
    
                // Step 4, draw the children
                dispatchDraw(canvas);
    
                // Step 6, draw decorations (scrollbars)
                onDrawScrollBars(canvas);
    
                if (mOverlay != null && !mOverlay.isEmpty()) {
                    mOverlay.getOverlayView().dispatchDraw(canvas);
                }
    
                // we're done...
                return;
            }
    

    上面注释已经给了详细的解释 draw 方法的相关主要步骤:
    1 绘制背景 drawBackground(canvas)。
    2 绘制内容 onDraw(canvas) 。
    3 绘制子类 dispatchDraw(canvas)。
    4 绘制装饰 onDrawScrollBars(canvas)。

    dispatchDraw 方法实现 View 的传递,遍历所有的子类进行绘制。

    通过以上分析,已经完成了一个 View 的绘制过程,在实际开发中会有各式各样的需求,其本质就是根据具体的需求实现 onMeasure、onLayout、onDraw 方法从而达到不同的效果。

    相关文章

      网友评论

          本文标题:Android 中 View 的绘制原理

          本文链接:https://www.haomeiwen.com/subject/otgifktx.html