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

通用

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

相對布局

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

1缸逃、Android

• 使用 RelativeLayout 或 FrameLayout 實現(xiàn)
• 可通過margin移動子控件
• 在RelativeLayout還提供兩類參考系幫助更快速定位——相對于父容器、相對其他兄弟控件厂抽，比如是否在父容器最底部（android:layout_alignParentBottom）需频、在父容器垂直居中（android:layout_centerVertical）、在某個控件下方（android:layout_below）筷凤、與某個控件頂部對齊（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 一起實現(xiàn)
• Stack表示這是一個可堆疊子組件的容器，其中的alignment 屬性可以用來控制未定位或部分定位的子組件的對齊方式
• Positioned 用來給子組件指定具體的位置藐守，包括 top挪丢、right、bottom 和 left卢厂，它只能作為 Stack 的直接子組件使用

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

3乾蓬、Vue

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

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

線性布局

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

1族奢、Android

• 使用 Linerlayout 實現(xiàn)姥闭，默認(rèn)horizontal
• android:orientation表示子控件的排布方向丹鸿，值horizontal/vertical
• android:gravity表示子控件的對齊方式越走，默認(rèn)start
• android:layout_weight表示子控件對剩余空間的占用比例，默認(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>

• 文本超過一行打點：

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

2靠欢、Flutter

• 使用 Row（水平排列）或Column （垂直排列）實現(xiàn)
• Expanded表示一個在主軸方向上撐滿剩余空間的組件廊敌，只能作為Row或Column 子節(jié)點
• mainAxisAlignment表示主軸方向上的對齊方式，默認(rèn)start
• crossAxisAlignment表示副軸方向上的對齊方式门怪，默認(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"),
    ],
    ],
  ),
),

• 文本超過一行打點：

maxLines: 1,
overflow: TextOverflow.ellipsis,

3骡澈、Vue

• 通過display: flex 實現(xiàn)，默認(rèn)row
• flex-direction表示子元素的排布方向掷空，值row/column
• justify-content表示主軸方向上的對齊方式肋殴，默認(rèn)start
• align-items表示副軸方向上的對齊方式，默認(rèn)start
• flex-grow表示子元素對剩余空間的占用比例坦弟，默認(rèn)0
• flex-shrink表示子元素在控件不足時的縮小比例护锤，默認(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>

• 文本超過一行打點：

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