面向 Web 開發者的 Flutter

本頁面向熟悉 HTML 和 CSS 語法來排列應用程式 UI 元件的使用者。它將 HTML/CSS 程式碼片段對映到其 Flutter/Dart 程式碼等效項。

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

設計 Web 佈局和 Flutter 佈局之間的一個根本區別是學習約束的工作方式以及小部件的尺寸和定位方式。要了解更多資訊，請參閱理解約束。

這些示例假設

HTML 文件以 <!DOCTYPE html> 開頭，並且所有 HTML 元素的 CSS 盒模型都設定為border-box，以與 Flutter 模型保持一致。
css
```
{
    box-sizing: border-box;
}
```
在 Flutter 中，為了保持語法簡潔，“Lorem ipsum”文字的預設樣式由 bold24Roboto 變數定義，如下所示：
dart
```
TextStyle bold24Roboto = const TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
);
```

以下示例展示瞭如何執行最常見的 UI 佈局任務。

CSS 透過 font 和 color 屬性處理的字型樣式、大小和其他文字屬性是 Text 元件的 TextStyle 子項的獨立屬性。

對於 CSS 中用於對齊文字的 text-align 屬性，Text 元件有一個 textAlign 屬性。

在 HTML 和 Flutter 中，子元素或小部件預設都錨定在左上角。

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 小部件會將其子項水平和垂直居中。

要在 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 元件的寬度，請使用其 width 屬性。這是一個固定寬度，不像 CSS 的 max-width 屬性會根據最大值調整容器寬度。要在 Flutter 中模仿這種效果，請使用 Container 的 constraints 屬性。建立一個新的 BoxConstraints 元件，並設定 minWidth 或 maxWidth。

對於巢狀的 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,
      ),
    ),
  ),
);

以下示例展示瞭如何對小部件的位置、大小和背景執行更復雜的操作。

預設情況下，小部件相對於其父級定位。

要為小部件指定 x-y 座標的絕對位置，請將其巢狀在 Positioned 小部件中，該小部件又巢狀在 Stack 小部件中。

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,
          ),
        ),
      ),
    ],
  ),
);

要旋轉小部件，請將其巢狀在 Transform 小部件中。使用 Transform 小部件的 alignment 和 origin 屬性分別以相對和絕對術語指定變換原點（支點）。

對於簡單的 2D 旋轉，其中小部件在 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,
        ),
      ),
    ),
  ),
);

要放大或縮小小部件，請將其巢狀在 Transform 小部件中。使用 Transform 小部件的 alignment 和 origin 屬性分別以相對或絕對術語指定變換原點（支點）。

對於沿 x 軸的簡單縮放操作，請建立一個新的 Matrix4 恆等物件，並使用其 scale() 方法指定縮放因子。

當您縮放父小部件時，其子小部件也會相應地縮放。

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()..scaleByDouble(1.5, 1.5, 1.5, 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,
        ),
      ),
    ),
  ),
);

要將線性漸變應用於小部件的背景，請將其巢狀在 Container 小部件中。然後使用 Container 小部件的 decoration 屬性建立 BoxDecoration 物件，並使用 BoxDecoration 的 gradient 屬性轉換背景填充。

漸變“角度”基於對齊 (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, blur: 4px, color: 黑色 @80% 透明度
xOffset: 0px, yOffset: 06px, blur: 20px, color: 黑色 @50% 透明度

在 Flutter 中，每個屬性和值都是單獨指定的。使用 BoxDecoration 的 boxShadow 屬性建立 BoxShadow 小部件列表。您可以定義一個或多個 BoxShadow 小部件，它們可以堆疊以自定義陰影深度、顏色等。

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% 的 border-radius，儘管也有基本形狀。

雖然這種方法在 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 元件的 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 小部件允許您顯示具有某些格式特徵的文字。要顯示使用多種樣式（在此示例中，一個帶有強調的單詞）的文字，請改用 RichText 小部件。其 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 小部件的 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 的最新穩定版本。頁面最後更新時間：2025 年 8 月 14 日。檢視原始碼或報告問題。

面向 Web 開發者的 Flutter

執行基本佈局操作

文字樣式和對齊

設定背景顏色

元件居中

設定容器寬度

操作位置和大小

設定絕對位置

旋轉元件

縮放元件

應用線性漸變

垂直漸變

水平漸變

操作形狀

圓角

新增盒陰影

製作圓形和橢圓形

操作文字

調整文字間距

進行內聯格式化更改

建立文字摘錄