Android - Constraintlayout2.0

原文

目前2.0只是新增了一些新功能和新玩法,對1.x版本無取代之意,所以1.x版本還是得學習的。好文推薦 2.0版本新增的內容在實踐開發也是非常實用的,建議可以上車了。

「由於無知與惰性,讓我們感覺摸到了技術的天花板」

「對你有用,幫忙點贊~」

基於本文發表,ConstraintLayout版本已經更新到2.0.0-beta8,所以添加依賴的姿勢:

AndroidX:

  implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta8'

支持庫:

 implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta8'

版本說明:

alpha:內部測試版,bug多多;

beta:公開測試版本,bug少點,支持嚐鮮;

rc:候選版本,功能不增,和發佈版本一致,修修小bug;

stable:穩定版本,你儘管用,bug能找到是福氣。

目錄

一、Flow流式虛擬佈局(alpha 5增加)

正常情況下,列表顯示一般採用ListView或者RecyclerView來實現,但其子Item佈局是非常呆板的。想象一下,如果一部作品的詳情頁結束打上一堆標籤,樣式如下,該怎麼實現?

Constraintlayout2.0:你們要的更新來了


這種佈局採用Flow來實現特別的簡單和方便,而且通過flow_wrapMode屬性可以設置不同對齊方式。

下面佈局代碼簡單示例:Flow佈局通過constraint_referenced_ids屬性將要約束的Viewid進行關聯,這裡簡單關聯AGTextView,由於TextView沒有設置約束條件,所以Android Studio 4.0 會報紅,給ConstraintLayout佈局添加tools:ignore="MissingConstraints"忽略報紅提示。

Flow佈局的flow_horizontalGap屬性表示水平之間兩個View的水平間隔,flow_verticalGap則是垂直方向間隔。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MissingConstraints"//忽略Android Studio 4.0報紅提示
tools:context=".MainActivity">
<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
app:flow_horizontalGap="30dp" //View水平間隔
app:flow_verticalGap="30dp" //垂直間隔
app:flow_wrapMode="none"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tvA"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="A"
android:textColor="#ffffff"
android:textSize="16sp"
/>
<TextView
android:id="@+id/tvB"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="B"
android:textColor="#ffffff"
android:textSize="16sp"
/>
<TextView
android:id="@+id/tvC"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="C"
android:textColor="#ffffff"
android:textSize="16sp"
/>
<TextView
android:id="@+id/tvD"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="D"
android:textColor="#ffffff"
android:textSize="16sp"
/>
<TextView
android:id="@+id/tvE"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="E"
android:textColor="#ffffff"
android:textSize="16sp"
/>
<TextView
android:id="@+id/tvF"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="F"
android:textColor="#ffffff"
android:textSize="16sp"
/>
<TextView
android:id="@+id/tvG"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="G"
android:textColor="#ffffff"
android:textSize="16sp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

flow_wrapMode屬性一共有三種值,在上面的佈局的基礎上,更換一下不同的值,看一下效果:

「none值」:所有引用的View形成一條鏈,水平居中,超出屏幕兩側的View不可見。

Constraintlayout2.0:你們要的更新來了

「chian值」:所引用的View形成一條鏈,超出部分會自動換行,同行的View會平分寬度。

Constraintlayout2.0:你們要的更新來了

「aligned值」:所引用的View形成一條鏈,但View會在同行同列。

Constraintlayout2.0:你們要的更新來了

即然是一條鏈,那麼可以通過鏈的樣式進行約束。

鏈約束

flow_wrapMode屬性為alignedchian屬性時,通過鏈進行約束。ConstraintLayout,看完一篇真的就夠了麼? 此文有談到鏈約束(Chain)。

Flow佈局添加以下屬性進行不同chain約束:

  • flow_firstHorizontalStyle 約束第一條水平鏈,當有多條鏈(多行)時,只約束第一條鏈(第一行),其他鏈(其他行)不約束;
  • flow_lastHorizontalStyle 約束最後一條水平鏈,當有多條鏈(多行)時,只約束最後一條鏈(最後一行),其他鏈(其他行)不約束;
  • flow_horizontalStyle 約束所有水平鏈;
  • flow_firstVerticalStyle 同水平約束;
  • flow_lastVerticalStyle 同水平約束;
  • flow_verticalStyle 約束所有垂直鏈;

以上屬性,取值有:spreadspread_insidepacked

「效果:」

spread值:

Constraintlayout2.0:你們要的更新來了


代碼:

    <androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
app:flow_maxElementsWrap="4"
app:flow_horizontalGap="30dp"
app:flow_verticalGap="30dp"
app:flow_wrapMode="chain"
app:flow_horizontalStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

spread_inside值:

Constraintlayout2.0:你們要的更新來了


代碼:

  <androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
app:flow_maxElementsWrap="4"
app:flow_horizontalGap="30dp"
app:flow_verticalGap="30dp"
app:flow_wrapMode="chain"
app:flow_horizontalStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

packed值:

Constraintlayout2.0:你們要的更新來了


代碼:

    <androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
app:flow_maxElementsWrap="4"
app:flow_horizontalGap="30dp"
app:flow_verticalGap="30dp"
app:flow_wrapMode="chain"
app:flow_horizontalStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

其他效果大家在實踐可以嘗試看看效果,建議「點贊」收藏本文,在使用不會可以翻閱一下,效率事半功倍,免得重新浪費時間谷歌搜索。


對齊

上文XML佈局中,所有TextView的寬高是一致的,所以看著整整齊齊,當寬高不一致時,可以進行對齊處理。個人試了一下app:flow_wrapMode="aligned"下的對齊,沒啥效果,估計有默認值了吧。看看flow_wrapMode屬性為nonechain情況吧。

Flow佈局添加以下屬性進行不同Align約束:

  • flow_verticalAlign 垂直方向對齊,取值有:topbottomcenterbaseline;
  • flow_horizontalAlign 水平方向對齊,取值有:startendcenter;

對齊方向一般與鏈的方向相反才可生效,例如垂直鏈樣式,一般對齊View的左右邊和中間。

簡單舉個例子:垂直方向頂部對齊。

「效果圖:」

Constraintlayout2.0:你們要的更新來了


可以看到EGF頂部對齊。

代碼:

    <androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
app:flow_maxElementsWrap="4"
app:flow_horizontalGap="30dp"
app:flow_verticalGap="30dp"
app:flow_wrapMode="chain"
app:flow_verticalAlign="top"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

簡單的理解alignedchiannone的定製版,通過添加不同的屬性定製而成。由於Flow是虛擬佈局,簡單理解就是約束助手,它並不會增加布局層級,卻可以像正常的佈局一樣使用。

「其他屬性」

上文的XML的佈局沒有設置Flow對View的組織方式(水平or 垂直),可以通過orientation屬性來設置水平horizontal和垂直vertical方向,例如改為垂直方向。

Constraintlayout2.0:你們要的更新來了

flow_wrapMode屬性為alignedchian時,通過flow_maxElementsWrap屬性控制每行最大的子View數量。例如:flow_maxElementsWrap=3

Constraintlayout2.0:你們要的更新來了

flow_wrapMode屬性為none時,A和G被擋住了,看不到。

Constraintlayout2.0:你們要的更新來了


要A或者G可見,通過設置flow_horizontalBias屬性,取值在0-1之間。前提條件是flow_horizontalStyle屬性為packed才會生效。

   <androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
app:flow_horizontalGap="30dp"
app:flow_verticalGap="30dp"
app:flow_wrapMode="none"
app:flow_horizontalStyle="packed"
app:flow_horizontalBias="0"
android:layout_marginTop="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

「效果圖:」
 

Constraintlayout2.0:你們要的更新來了


設置flow_horizontalBias=1那麼G就可以看到了。該屬性還有其他類似ChainStyle的屬性w玩法,具體可以實踐體驗。當然,也可以在flow_wrapMode屬性為其他值生效。

通過不同的屬性可以搭配很多不同的效果,再加上MotionLayout動畫,那就更炫酷了。

二、Layer 層佈局

Layer也是一個約束助手ConstraintHelper,相對Flow比較簡單,常用來增加背景,或者共同動畫。由於ConstraintHelper本身繼承自View,跟我們自己通過View在ConstraintLayout佈局中給多個View添加共同背景沒什麼區別,只是更方便而已。

「1、添加背景」

ImageViewTextView添加個共同背景:

「效果:」

Constraintlayout2.0:你們要的更新來了

「代碼:」

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.helper.widget.Layer
android:id="@+id/layer"
android:layout_marginTop="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:constraint_referenced_ids="ivImage,tvName"
app:layout_constraintLeft_toLeftOf="@id/ivImage"
app:layout_constraintRight_toRightOf="parent"
android:padding="10dp"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<ImageView
android:id="@+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="@mipmap/ic_launcher_round"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/layer" />
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="新小夢"
android:textColor="#FFFFFF"
android:paddingTop="5dp"
app:layout_constraintLeft_toLeftOf="@id/ivImage"
app:layout_constraintRight_toRightOf="@id/ivImage"
app:layout_constraintTop_toBottomOf="@id/ivImage" />
</androidx.constraintlayout.widget.ConstraintLayout>

「2、共同動畫」

通過屬性動畫給ImageView和TextView添加通過動畫效果。

「效果:」

Constraintlayout2.0:你們要的更新來了


「代碼:」

val animator = ValueAnimator.ofFloat( 0f, 360f)
animator.repeatMode=ValueAnimator.RESTART
animator.duration=2000
animator.interpolator=LinearInterpolator()
animator.repeatCount=ValueAnimator.INFINITE
animator.addUpdateListener {
layer.rotation=  it.animatedValue as Float
}
layer.setOnClickListener {
animator.start()
}

對屬性動畫模糊的同學可以看看:Android屬性動畫,看完這篇夠用了吧

支持:旋轉、位移、縮放動畫。透明效果試了一下,是針對自身的,而不是約束的View。

三、自定義ConstraintHelper

FlowLayer都是ConstraintHelper的子類,當兩者不滿足需求時,可以通過繼承ConstraintHelper來實現想要的約束效果。

在某乎APP有這麼個類似的動畫廣告:

Constraintlayout2.0:你們要的更新來了


那麼通過自定義ConstraintHelper來實現就非常簡單:

class AdHelper :
ConstraintHelper {
constructor(context: Context?) : super(context)
constructor(context: Context?,attributeSet: AttributeSet):super(context,attributeSet)
constructor(context: Context?,attributeSet: AttributeSet,defStyleAttr: Int):super(context,attributeSet,defStyleAttr)
override fun updatePostLayout(container: ConstraintLayout?) {
super.updatePostLayout(container)
val views = getViews(container)
views.forEach {
val anim = ViewAnimationUtils.createCircularReveal(it, 0, 0, 0f, it.width.toFloat())
anim.duration = 5000
anim.start()
}
}
}

佈局引用AdHleper

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.constraint.AdHelper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="ivLogo"
app:layout_constraintLeft_toLeftOf="@id/ivLogo"
app:layout_constraintRight_toRightOf="@id/ivLogo"
app:layout_constraintTop_toTopOf="@id/ivLogo" />
<ImageView
android:id="@+id/ivLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="@mipmap/ic_logo"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

四、ImageFilterButton

圓角圖片,圓形圖片怎麼實現?自定義View?通過ImageFilterButton,一個屬性就搞定;ImageFilterButto能做的還有更多。

看看如何實現圓角或圓形圖片:

「原圖:」

Constraintlayout2.0:你們要的更新來了


roundPercent屬性設置為1,取值在0-1,由正方形向圓形過渡。

    <androidx.constraintlayout.utils.widget.ImageFilterButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
app:roundPercent="1"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

「效果:」

Constraintlayout2.0:你們要的更新來了


也可以通過設置round屬性來實現:

    <androidx.constraintlayout.utils.widget.ImageFilterButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:round="50dp" />

「其他屬性:」

altSrcsrc屬性是一樣的概念,altSrc提供的資源將會和src提供的資源通過crossfade屬性形成交叉淡化效果。默認情況下,crossfade=0altSrc所引用的資源不可見,取值在0-1
例如:

    <androidx.constraintlayout.utils.widget.ImageFilterButton
android:id="@+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:src="@mipmap/ic_launcher"
app:altSrc="@mipmap/ic_sun"
app:crossfade="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:round="50dp" />

crossfade=0.5時,效果:

Constraintlayout2.0:你們要的更新來了


crossfade=1時,效果:

Constraintlayout2.0:你們要的更新來了

接下來幾個屬性是對圖片進行調節:

warmth色溫:1=neutral自然, 2=warm暖色, 0.5=cold冷色

Constraintlayout2.0:你們要的更新來了


brightness亮度:0 = black暗色, 1 = original原始, 2 = twice as bright兩倍亮度;這個效果不好貼圖,大家自行驗證;

saturation飽和度:0 = grayscale灰色, 1 = original原始, 2 = hyper saturated超飽和

Constraintlayout2.0:你們要的更新來了


contrast對比:1 = unchanged原始, 0 = gray暗淡, 2 = high contrast高對比;

Constraintlayout2.0:你們要的更新來了

上面屬性的取值都是0、1、2,不過大家可以取其他值,效果也是不一樣的。
最後一個屬性overlay,表示不知道怎麼用,看不到沒效果,大家看看評論跟我說聲?

Constraintlayout2.0:你們要的更新來了

五、ImageFilterView

ImageFilterViewImageFilterButton的屬性一模一樣,只是它兩繼承的父類不一樣,一些操作也就不一樣。ImageFilterButton繼承自AppCompatImageButton,也就是ImageButtion。而ImageFilterView繼承自ImageView

Constraintlayout2.0:你們要的更新來了

六、MockView

還記得你家項目經理給你的UI原型圖麼?想不想回敬一下項目經理,是時候了~
 

Constraintlayout2.0:你們要的更新來了


MockView能簡單的幫助構建UI界面,通過對角線形成的矩形+標籤。例如:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.utils.widget.MockView
android:id="@+id/first"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.utils.widget.MockView
android:id="@+id/second"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintLeft_toRightOf="@id/first"
app:layout_constraintTop_toBottomOf="@id/first" />
</androidx.constraintlayout.widget.ConstraintLayout>

「效果:」

Constraintlayout2.0:你們要的更新來了


中間黑色顯示的是MockViewid。通過MockView可以很好的構建一些UI思路。

七、MotionLayout

MitionLayou主要是用來實現動作動畫,可以參考我的另一篇文章:Android MotionLayout動畫:續寫ConstraintLayout新篇章

八、邊距問題的補充

ConstraintLayout實踐經驗的朋友應該知道margin設置負值在ConstraintLayout是沒有效果的。例如下面佈局:TextView B的layout_marginLeftlayout_marginTop屬性是不會生效的。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/vA"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="A"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/vB"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="-30dp"
android:layout_marginTop="-30dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="B"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintLeft_toRightOf="@id/vA"
app:layout_constraintTop_toBottomOf="@id/vA" />
</androidx.constraintlayout.widget.ConstraintLayout>

「效果:」
 

Constraintlayout2.0:你們要的更新來了


可以通過輕量級的Space來間接實現這種效果。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/vA"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="A"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Space
android:id="@+id/space"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="30dp"
app:layout_constraintBottom_toBottomOf="@id/vA"
app:layout_constraintRight_toRightOf="@id/vA" />
<TextView
android:id="@+id/vB"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="-30dp"
android:layout_marginTop="-30dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="B"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintLeft_toRightOf="@id/space"
app:layout_constraintTop_toBottomOf="@id/space" />
</androidx.constraintlayout.widget.ConstraintLayout>

「效果:」
 

Constraintlayout2.0:你們要的更新來了

2.0還增加了ConstraintProperties類用於通過api(代碼)更新ConstraintLayout子視圖;其他一些可以參考官方文檔,估計也差不多了。

「參考:」

官方英文文檔

能讀到末尾的小夥伴都是很棒,耐力很好。如果本文對你有用,幫忙「點個贊」,推薦好文。

最後的最後,個人能力有限,有理解錯誤或者錯誤的地方,希望大家幫忙糾正,非常感謝。

「歡迎star 歡迎點贊」Github