hi好久不見(jiàn)~消失的這半年做了件大事，生了個(gè)兔寶寶??產(chǎn)假回來(lái)之后發(fā)現(xiàn)項(xiàng)目組又啟動(dòng)了一個(gè)新項(xiàng)目，這次做的網(wǎng)頁(yè)，基于Nuxt3開發(fā)的，于是開始了學(xué)習(xí)前端知識(shí)。這一路從Android單端、到Flutter跨平臺(tái)、再到現(xiàn)在Web，有種在大前端升級(jí)打怪的感覺(jué)。當(dāng)然了，由于接觸不深加上著急上手，第一步往往先做UI，本篇總結(jié)在Android、Flutter、Vue上最常用幾種布局在實(shí)現(xiàn)上的區(qū)別，方便有客戶端經(jīng)驗(yàn)的開發(fā)更快理解和實(shí)踐Web項(xiàng)目。

通用

在Web中使用CSS（Cascading Style Sheets，層疊樣式表）來(lái)描述樣式，在Android 中使用的是XML（Extensible Markup Language，可擴(kuò)展標(biāo)記語(yǔ)言），目的都是將把數(shù)據(jù)與樣式分開。而Flutter使用一種稱為Widget的組件系統(tǒng)來(lái)構(gòu)建 UI，每個(gè)Widget都有自己的屬性，創(chuàng)建時(shí)傳入相應(yīng)參數(shù)就能設(shè)置樣式了。常見(jiàn)通用屬性如間距、顏色、文本這些命名都是相似的，就不詳細(xì)說(shuō)明了，對(duì)照表如下：

相對(duì)布局

實(shí)現(xiàn)在容器中距頂部100距左側(cè)50：

1、Android

• 使用 RelativeLayout 或 FrameLayout 實(shí)現(xiàn)
• 可通過(guò)margin移動(dòng)子控件
• 在RelativeLayout還提供兩類參考系幫助更快速定位——相對(duì)于父容器、相對(duì)其他兄弟控件，比如是否在父容器最底部（android:layout_alignParentBottom）、在父容器垂直居中（android:layout_centerVertical）、在某個(gè)控件下方（android:layout_below）、與某個(gè)控件頂部對(duì)齊（android:layout_alignTop）等

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="50dp" />

</RelativeLayout>

2、Flutter

• 使用 Stack 和 Positioned 一起實(shí)現(xiàn)
• Stack表示這是一個(gè)可堆疊子組件的容器，其中的alignment 屬性可以用來(lái)控制未定位或部分定位的子組件的對(duì)齊方式
• Positioned 用來(lái)給子組件指定具體的位置，包括 top、right、bottom 和 left，它只能作為 Stack 的直接子組件使用

Stack(
  alignment: Alignment.center,
  children: [
    Positioned(
      top: 100,
      left: 50,
      child: Text('A'),
    ),
  ],
)

3、Vue

• 使用position 屬性來(lái)實(shí)現(xiàn)
• 同樣的通過(guò) top、right、bottom 和 left 來(lái)定位
• 當(dāng)position 設(shè)置為 relative 時(shí)元素會(huì)相對(duì)于其原始位置進(jìn)行移動(dòng)
• 當(dāng)position 設(shè)置為 absolute 時(shí)元素會(huì)相對(duì)于其最近一個(gè)定位的父元素進(jìn)行移動(dòng)

<div style="position: relative; height: 200px; width: 200px;">
  <div style="position: absolute; top: 100px; left: 50px;">A</div>
</div>

線性布局

實(shí)現(xiàn)三個(gè)控件水平排布，最后一個(gè)靠右，第二個(gè)元素分配剩余空間，整體在容器中垂直居中：

1、Android

• 使用 Linerlayout 實(shí)現(xiàn)，默認(rèn)horizontal
• android:orientation表示子控件的排布方向，值horizontal/vertical
• android:gravity表示子控件的對(duì)齊方式，默認(rèn)start
• android:layout_weight表示子控件對(duì)剩余空間的占用比例，默認(rèn)0

<LinearLayout
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="B"
        android:maxLines="1"
        android:ellipsize="end"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"/>

</LinearLayout>

• 文本超過(guò)一行打點(diǎn)：

android:maxLines="1"
android:ellipsize="end"

2、Flutter

• 使用 Row（水平排列）或Column （垂直排列）實(shí)現(xiàn)
• Expanded表示一個(gè)在主軸方向上撐滿剩余空間的組件，只能作為Row或Column 子節(jié)點(diǎn)
• mainAxisAlignment表示主軸方向上的對(duì)齊方式，默認(rèn)start
• crossAxisAlignment表示副軸方向上的對(duì)齊方式，默認(rèn)center

Container(
  width: 200,
  height: 50,
  child: Row(
    children: [
    Text("A"),
      Expanded(
        child: Text(
          "B",
          maxLines: 1,
          overflow: overflow: TextOverflow.ellipsis,
        ),
      ),
      Text("C"),
    ],
    ],
  ),
),

• 文本超過(guò)一行打點(diǎn)：

maxLines: 1,
overflow: TextOverflow.ellipsis,

3、Vue

• 通過(guò)display: flex 實(shí)現(xiàn)，默認(rèn)row
• flex-direction表示子元素的排布方向，值row/column
• justify-content表示主軸方向上的對(duì)齊方式，默認(rèn)start
• align-items表示副軸方向上的對(duì)齊方式，默認(rèn)start
• flex-grow表示子元素對(duì)剩余空間的占用比例，默認(rèn)0
• flex-shrink表示子元素在控件不足時(shí)的縮小比例，默認(rèn)1

   <div style="display: flex; align-items:center; height: 50px; width: 200px" >
    <span>A</span>
    <span style="flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;">B</span>
    <span>C</span>
  </div>

• 文本超過(guò)一行打點(diǎn)：

display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;