給網頁開發者的 Flutter

執行基本版面配置作業
操控位置和大小
操控形狀
文字操作

本頁適用於熟悉 HTML 和 CSS 語法以安排應用程式 UI 元件的使用者。它將 HTML/CSS 程式碼片段對應到它們的 Flutter/Dart 程式碼等效項。

Flutter 是一個用於建構跨平台應用程式的框架，它使用 Dart 程式語言。若要了解使用 Dart 程式設計與使用 Javascript 程式設計之間的一些差異，請參閱以 JavaScript 開發者身分學習 Dart。

網頁版面配置和 Flutter 版面配置之間的基本差異之一，是學習約束如何運作，以及 widget 如何調整大小和定位。若要了解更多資訊，請參閱了解約束。

這些範例假設

HTML 文件以 <!DOCTYPE html> 開頭，並且所有 HTML 元素的 CSS box 模型都設定為 border-box，以便與 Flutter 模型保持一致。
css
```
{
    box-sizing: border-box;
}
```

在 Flutter 中，「Lorem ipsum」文字的預設樣式由 bold24Roboto 變數定義如下，以保持語法簡潔

dartTextStyle bold24Roboto = const TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
);

以下範例示範如何執行最常見的 UI 版面配置任務。

CSS 使用 font 和 color 屬性處理的字體樣式、大小和其他文字屬性，是 TextStyle（Text widget 的子項目）的個別屬性。

對於 CSS 中用於對齊文字的 text-align 屬性，Text widget 具有 textAlign 屬性。

在 HTML 和 Flutter 中，子元素或 widget 預設會錨定在左上角。

css<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Georgia;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: const Text(
    'Lorem ipsum',
    style: TextStyle(
      fontFamily: 'Georgia',
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    textAlign: TextAlign.center,
  ),
);

在 Flutter 中，您可以使用 Container 的 color 屬性或 decoration 屬性設定背景顏色。但是，您不能同時提供兩者，因為這可能會導致裝飾覆蓋背景顏色。當背景是簡單的顏色時，應優先使用 color 屬性。對於其他情況，例如漸層或影像，請使用 decoration 屬性。

CSS 範例使用與 Material 色彩調色盤對應的十六進位顏色。

css<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

Center widget 會在水平和垂直方向將其子項目置中。

若要在 CSS 中達到類似效果，父元素會使用 flex 或 table-cell 顯示行為。本頁的範例顯示 flex 行為。

css<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Text(
      'Lorem ipsum',
      style: bold24Roboto,
    ),
  ),
);

若要指定 Container widget 的寬度，請使用其 width 屬性。這是一個固定寬度，不同於 CSS 的 max-width 屬性，後者會將容器寬度調整到最大值。若要在 Flutter 中模擬該效果，請使用 Container 的 constraints 屬性。建立具有 minWidth 或 maxWidth 的新 BoxConstraints widget。

對於巢狀 Container，如果父項的寬度小於子項的寬度，則子 Container 會自行調整大小以符合父項。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    width: 100%;
    max-width: 240px;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      width: 240, // max-width is 240
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

以下範例示範如何對 widget 的位置、大小和背景執行更複雜的操作。

預設情況下，widget 相對於其父項定位。

若要為 widget 指定 x-y 座標的絕對位置，請將其巢狀置於 Positioned widget 中，而 Positioned widget 又巢狀置於 Stack widget 中。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    position: relative;
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    position: absolute;
    top: 24px;
    left: 24px;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Stack(
    children: [
      Positioned(
        // red box
        left: 24,
        top: 24,
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          child: Text(
            'Lorem ipsum',
            style: bold24Roboto,
          ),
        ),
      ),
    ],
  ),
);

若要旋轉 widget，請將其巢狀置於 Transform widget 中。使用 Transform widget 的 alignment 和 origin 屬性，分別以相對和絕對的方式指定轉換原點（支點）。

對於簡單的 2D 旋轉（其中 widget 會在 Z 軸上旋轉），請建立新的 Matrix4 識別物件，並使用其 rotateZ() 方法，使用弧度 (度數 × π / 180) 指定旋轉因數。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    transform: rotate(15deg);
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..rotateZ(15 * 3.1415927 / 180),
      child: Container(
        // red box
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        child: Text(
          'Lorem ipsum',
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
);

若要放大或縮小 widget，請將其巢狀置於 Transform widget 中。使用 Transform widget 的 alignment 和 origin 屬性，分別以相對或絕對的方式指定轉換原點（支點）。

若要沿著 x 軸執行簡單的縮放作業，請建立新的 Matrix4 識別物件，並使用其 scale() 方法指定縮放因數。

當您縮放父 widget 時，其子 widget 也會相應地縮放。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    transform: scale(1.5);
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..scale(1.5),
      child: Container(
        // red box
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        child: Text(
          'Lorem ipsum',
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
);

若要將線性漸層套用至 widget 的背景，請將其巢狀置於 Container widget 中。然後使用 Container widget 的 decoration 屬性建立 BoxDecoration 物件，並使用 BoxDecoration 的 gradient 屬性來轉換背景填滿。

漸層「角度」基於 Alignment (x, y) 值

如果開始和結束 x 值相等，則漸層為垂直 (0° | 180°)。
如果開始和結束 y 值相等，則漸層為水平 (90° | 270°)。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment(0.0, 0.6),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment(-1.0, 0.0),
          end: Alignment(0.6, 0.0),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

以下範例示範如何製作和自訂形狀。

若要將矩形形狀的角變圓，請使用 BoxDecoration 物件的 borderRadius 屬性。建立指定每個角變圓半徑的新 BorderRadius 物件。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    border-radius: 8px;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red circle
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
        borderRadius: const BorderRadius.all(
          Radius.circular(8),
        ),
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

在 CSS 中，您可以使用 box-shadow 屬性以速記方式指定陰影偏移和模糊。此範例顯示兩個具有屬性的陰影

xOffset：0px，yOffset：2px，模糊：4px，顏色：黑色，alpha 值為 80%
xOffset：0px，yOffset：06x，模糊：20px，顏色：黑色，alpha 值為 50%

在 Flutter 中，每個屬性和值都會分別指定。使用 BoxDecoration 的 boxShadow 屬性來建立 BoxShadow widget 的清單。您可以定義一個或多個 BoxShadow widget，這些 widget 可以堆疊以自訂陰影深度、顏色等等。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
              0 6px 20px rgba(0, 0, 0, 0.5);
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  margin: const EdgeInsets.only(bottom: 16),
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
        boxShadow: const <BoxShadow>[
          BoxShadow(
            color: Color(0xcc000000),
            offset: Offset(0, 2),
            blurRadius: 4,
          ),
          BoxShadow(
            color: Color(0x80000000),
            offset: Offset(0, 6),
            blurRadius: 20,
          ),
        ],
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

在 CSS 中繪製圓形需要一個變通方法，即對矩形的所有四個邊套用 50% 的邊框半徑，儘管有基本形狀。

雖然 BoxDecoration 的 borderRadius 屬性支援此方法，但 Flutter 提供具有 BoxShape 列舉的 shape 屬性來達成此目的。

css<div class="grey-box">
  <div class="red-circle">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-circle {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    text-align: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red circle
      decoration: BoxDecoration(
        color: Colors.red[400],
        shape: BoxShape.circle,
      ),
      padding: const EdgeInsets.all(16),
      width: 160,
      height: 160,
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
        textAlign: TextAlign.center,
      ),
    ),
  ),
);

以下範例示範如何指定字體和其他文字屬性。它們也示範如何轉換文字字串、自訂間距以及建立摘錄。

在 CSS 中，您可以分別給予 letter-spacing 和 word-spacing 屬性長度值，以指定每個字母或單字之間的空白間距。間距量可以使用 px、pt、cm、em 等單位。

在 Flutter 中，您可以在 Text widget 的 TextStyle 子項的 letterSpacing 和 wordSpacing 屬性中，以邏輯像素（允許使用負值）指定空白間距。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    letter-spacing: 4px;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: const Text(
        'Lorem ipsum',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w900,
          letterSpacing: 4,
        ),
      ),
    ),
  ),
);

Text widget 可讓您顯示具有某些格式特性的文字。若要顯示使用多種樣式的文字（在此範例中，一個以強調方式顯示的單字），請改用 RichText widget。其 text 屬性可以指定一個或多個可以個別設定樣式的 TextSpan 物件。

在下列範例中，「Lorem」位於具有預設（繼承）文字樣式的 TextSpan 中，而「ipsum」位於具有自訂樣式的獨立 TextSpan 中。

css<div class="grey-box">
  <div class="red-box">
    Lorem <em>ipsum</em>
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
}
.red-box em {
    font: 300 48px Roboto;
    font-style: italic;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: RichText(
        text: TextSpan(
          style: bold24Roboto,
          children: const <TextSpan>[
            TextSpan(text: 'Lorem '),
            TextSpan(
              text: 'ipsum',
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

摘錄會顯示段落中的初始行數，並處理溢位文字，通常使用省略符號。

在 Flutter 中，請使用 Text widget 的 maxLines 屬性，以指定要在摘錄中包含的行數，並使用 overflow 屬性處理溢位文字。

css<div class="grey-box">
  <div class="red-box">
    Lorem ipsum dolor sit amet, consec etur
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

dartfinal container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum dolor sit amet, consec etur',
        style: bold24Roboto,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      ),
    ),
  ),
);

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新時間為 2024-10-10。檢視來源或回報問題。

給網頁開發者的 Flutter

執行基本版面配置作業

設定文字樣式和對齊方式

設定背景顏色

將元件置中

設定容器寬度

操控位置和大小

設定絕對位置

旋轉元件

縮放元件

套用線性漸層

垂直漸層

水平漸層

操控形狀

圓角

新增陰影

製作圓形和橢圓形

文字操作

調整文字間距

進行行內格式變更

建立文字摘錄