docs.flutter.dev 使用來自 Google 的 Cookie,以提供與提升服務品質,並分析流量。 了解更多.

跳至主要內容
Flutter 標誌 Flutter 文件
search
  • Flutter 標誌 Flutter
  • Flutter 標誌 Flutter 文件
  • Flutter 標誌 Flutter API
  • Dart 標誌 Dart
  • Dart 標誌 DartPad
  • Dart 標誌 pub.dev
開始使用
  • 開始使用
  • 設定 Flutter
    • 總覽
    • 使用 VS Code 安裝
    • 手動安裝
    • 升級 SDK
    • SDK 封存
    • 加入至路徑
    • 疑難排解
    • 解除安裝 SDK
    • 介紹
    • 撰寫第一個應用程式
      • 介紹
      • Dart 入門
      • 元件
      • 版面配置
      • 狀態管理
      • 處理使用者輸入
      • 網路與資料
      • 本機資料與快取
      • 給 Android 開發者的 Flutter 指南
      • 給 Jetpack Compose 開發者的 Flutter 指南
      • 給 SwiftUI 開發者的 Flutter 指南
      • 給 UIKit 開發者的 Flutter 指南
      • 給 React Native 開發者的 Flutter 指南
      • 給 Web 開發者的 Flutter 指南
      • 給 Xamarin.Forms 開發者的 Flutter 指南
      • 宣告式 UI 入門
      • Flutter 與 Swift 並行處理
    • 範例與教學
    • 版本資訊
    • 重大變更
    • 相容性政策
    • Flutter 部落格open_in_new
    • 文件最新更新
      • 總覽
      • 認識適用於 Flutter 的 Firebaseopen_in_new
      • 深入了解適用於 Flutter 的 Firebaseopen_in_new
      • 使用 FirebaseUI 為 Flutter 應用程式新增使用者驗證流程open_in_new
      • 深入了解適用於 Web 的 Firebaseopen_in_new
      • 總覽
      • 新增成就與排行榜
      • 使用 Firestore 建置排行榜open_in_new
      • 新增廣告
      • 新增多人遊戲支援
      • 新增應用程式內購open_in_new
      • 新增使用者驗證open_in_new
      • 使用 Crashlytics 偵錯open_in_new
      • Flutter 與 Flame 入門open_in_new
        • 廣告總覽
        • 新增廣告
        • 在 Flutter 應用程式中新增 AdMob 廣告open_in_new
        • 新增 AdMob 橫幅與原生內嵌廣告open_in_new
        • 整合多媒體(影片)廣告open_in_new
        • Google AdMob 廣告仲介open_in_new
        • 互動媒體廣告 SDKopen_in_new
        • 付款總覽
        • Google Pay 套件open_in_new
      • 新增應用程式內購open_in_new
      • 在 Flutter 應用程式中整合 Google 地圖open_in_new
      • Google Maps 套件open_in_new
    • 使用 AI 創作
    • AI 規範
      • 總覽
      • 使用者體驗
      • 功能整合
      • 自訂 LLM 服務提供者
      • 聊天用戶端範例
    • Dart 與 Flutter MCP 伺服器open_in_new
    • 適用於 Flutter 的 GenUI SDKopen_in_new
    • Firebase AI Logicopen_in_new
  • 使用者介面
  • 介紹
    • 總覽
      • Cupertino
      • Material 元件
      • 無障礙
      • 動畫
      • 素材
      • 非同步
      • 基礎知識
      • 輸入
      • 互動
      • 版面配置
      • 繪製
      • 捲動
      • 樣式
      • 文字
    • 介紹
    • 建置版面配置
      • 建立並使用清單
      • 建立水平清單
      • 建立格狀檢視
      • 建立包含不同項目型別的清單
      • 建立帶間距的清單
      • 處理長清單
      • 總覽
      • 使用 sliver 打造進階捲動效果
      • 將浮動應用列置於清單上方
      • 建立捲動視差效果
    • 總覽
    • 一般策略
    • SafeArea 與 MediaQuery
    • 大型螢幕與可摺疊裝置
    • 使用者輸入與無障礙
    • 功能與政策
    • 自動平台調適
    • 最佳實務
    • 其他資源
    • 使用主題共用樣式
    • Material 設計
    • 遷移至 Material 3
      • 字體與排版
      • 使用自訂字體
      • 從套件匯出字型
      • Google Fonts 套件open_in_new
      • 使用自訂片段著色器
    • 為應用程式新增互動功能
      • 介紹
      • 處理點擊
      • 將物件從應用程式拖曳到外部
      • 在應用程式內拖曳 UI 元素
      • 新增 Material 點按漣漪效果
      • 實作滑動關閉
      • 建立文字欄位並設定樣式
      • 取得文字欄位的值
      • 處理文字欄位的變更
      • 管理文字欄位焦點
      • 建置含驗證的表單
    • 顯示 Snackbar
    • 實作動作與快速鍵
    • 管理鍵盤焦點
    • 新增素材與圖片
    • 顯示網際網路上的圖片
    • 使用預留圖片淡入影像
    • 播放與暫停影片
    • 在建置時轉換素材
    • 總覽
    • 在應用程式中新增分頁
    • 導覽至新畫面並返回
    • 傳送資料至新畫面
    • 從畫面返回資料
    • 在頁面中新增抽屜選單
    • 設定深層連結
    • 為 Android 設定應用程式連結
    • 設定 iOS 通用連結
    • 設定 Web URL 策略
    • 介紹
    • 教學
    • 隱式動畫
    • 為容器屬性設定動畫
    • 淡入淡出元件
    • Hero 動畫
    • 為頁面路由轉場設定動畫
    • 使用物理模擬製作動畫
    • 交錯動畫
    • 建立交錯選單動畫
    • API 總覽
    • 介紹
    • UI 設計與樣式
    • 輔助技術
    • 無障礙測試
    • Web 無障礙
  • 國際化
  • 超越使用者介面
      • 介紹
      • 以宣告式思維
      • 暫存狀態與應用程式狀態
      • 簡易應用程式狀態管理
      • 選項
      • 總覽
      • 從網際網路擷取資料
      • 發出已驗證的請求
      • 傳送資料到網際網路
      • 透過網際網路更新資料
      • 刪除網際網路上的資料
      • 透過 WebSocket 通訊
      • JSON 序列化
      • 在背景解析 JSON
      • 在磁碟儲存鍵值資料
      • 讀寫檔案
      • 使用 SQLite 儲存資料
      • 總覽
      • 在 Flutter 應用程式中整合 Firebaseopen_in_new
    • Google API
    • 介紹
    • 架構概念
    • 應用程式架構指南
      • 總覽
      • UI 層
      • 資料層
      • 相依性注入
      • 各層測試
    • 建議
    • 設計模式
    • 支援的平台
    • 使用 Flutter 建置桌面應用程式
    • 撰寫平台專屬程式碼
      • 設定 Android 開發環境
      • 新增啟動畫面
      • 新增預測返回功能
      • 綁定至原生程式碼
      • 嵌入原生 Android 檢視
      • 呼叫 JetPack API
      • 啟動 Jetpack Compose 活動
      • 在 Android 還原狀態
      • 在 Android 上鎖定 ChromeOS
      • 保護應用程式的敏感內容
      • 設定 iOS 開發環境
      • 最新 iOS 上的 Flutter
      • 善用 Apple 的系統函式庫
      • 新增啟動畫面
      • 新增 iOS App Clip 支援
      • 新增 iOS App Extension
      • 綁定至原生程式碼
      • 嵌入原生 iOS 檢視
      • 在 iOS 啟用偵錯
      • 在 iOS 還原狀態
      • 設定 Linux 開發環境
      • 建置 Linux 應用程式
      • 設定 macOS 開發環境
      • 建置 macOS 應用程式
      • 綁定至原生程式碼
      • 嵌入原生 macOS 檢視
      • Flutter 中的 Web 支援
      • 設定 Web 開發環境
      • 建置 Web 應用程式
      • 編譯為 WebAssembly
      • 自訂應用程式初始化
      • 在任一 Web 應用程式中加入 Flutter
      • Flutter 中的 Web 內容
      • Web 繪圖引擎
      • 在 Web 上顯示圖片
      • Web 常見問題
      • 設定 Windows 開發環境
      • 建置 Windows 應用程式
    • 使用套件與外掛
    • 開發套件與外掛
      • 給應用程式開發者
      • 給外掛作者
    • Flutter 精選
    • 套件儲存庫open_in_new
    • 測試
    • 總覽
      • 介紹
      • 模擬相依性
      • 介紹
      • 尋找元件
      • 模擬捲動
      • 模擬使用者互動
      • 介紹
      • 撰寫並執行整合測試
      • 分析整合測試
    • 測試外掛
    • 在測試中處理外掛程式碼
    • 偵錯
    • 偵錯工具
    • 透過程式碼偵錯應用程式
    • 使用原生語言偵錯工具
    • 常見的 Flutter 錯誤
    • 處理錯誤
    • 將錯誤回報至服務
    • 總覽
    • Impeller
    • 效能最佳實務
    • 應用程式大小
    • 延遲元件
    • 繪製效能
    • 效能分析
    • Web 效能分析
    • 效能指標
    • 並行與隔離 Isolate
    • 效能常見問題
    • 附錄
    • 模糊化 Dart 程式碼
    • 為 Android 建立應用程式風味
    • 為 iOS 與 macOS 建立應用程式風味
    • 建置並發佈 Android 應用程式
    • 建置並發佈 iOS 應用程式
    • 建置並發佈 macOS 應用程式
    • 建置並發佈 Linux 應用程式
    • 建置並發佈 Windows 應用程式
    • 建置並發佈 Web 應用程式
    • 設定持續部署
    • 介紹
      • 設定 Android 專案
      • 新增單一 Flutter 畫面
      • 新增 Flutter Fragment
      • 新增 Flutter View
      • 使用 Flutter 外掛
      • 設定 iOS 專案
      • 新增單一 Flutter 畫面
    • 加入 Web 應用程式
    • 偵錯嵌入式 Flutter 模組
    • 新增多個 Flutter 執行個體
    • 載入順序與效能
    • Android Studio 與 IntelliJ
    • Visual Studio Code
      • 總覽
      • 從 Android Studio 與 IntelliJ 執行
      • 從 VS Code 執行
      • 從命令列執行
      • Flutter 檢查器
      • 舊版 Flutter 檢查器
      • 效能檢視
      • CPU 分析檢視
      • 記憶體檢視
      • 偵錯主控台檢視
      • 網路檢視
      • 偵錯工具
      • 記錄檢視
      • 應用程式大小工具
      • DevTools 擴充功能
      • 驗證深層連結
      • 版本資訊
    • Flutter Widget Previewer
    • Flutter Property Editor
    • SDK 總覽
    • Flutter 的 pubspec 選項
    • 自動修復
    • 程式碼格式化
    • 架構總覽
    • 深入 Flutter
    • 理解限制
    • Flutter 的建置模式
    • 熱重新載入
    • 常見問題
    • 影片
    • 課程
    • 學習 Dart
    • 尋求支援
      • 為 Flutter 做出貢獻
      • 撰寫實用的錯誤回報
      • 探索提案功能
      • Dash 是誰?
      • 元件索引
      • 建立新應用程式
      • flutter CLI
      • API 文件open_in_new

使用全新的 Flutter Extension for Gemini CLI 打造高品質、功能豐富的應用程式。 深入瞭解

繪製與效果元件 (Painting and effect widgets)

  1. UI chevron_right
  2. 元件 (Widgets) chevron_right
  3. 繪製 (Painting)
Flutter logo for widget missing visualization image.
BackdropFilter

對已繪製內容套用濾鏡,然後繪製子元件。此效果相對昂貴,特別是非局部濾鏡(如模糊)。

ClipOval

使用橢圓形裁剪其子元件的元件。

Flutter logo for widget missing visualization image.
ClipPath

使用路徑裁剪其子元件的元件。

ClipRect

使用矩形裁剪其子元件的元件。

CustomPaint

提供畫布以在繪製階段繪圖的元件。

DecoratedBox

在子元件繪製前或後繪製 Decoration 的元件。

Flutter logo for widget missing visualization image.
FractionalTranslation

在繪製子元件前,根據盒子大小的比例套用平移的元件。

Opacity

讓子元件部分透明的元件。

Flutter logo for widget missing visualization image.
RotatedBox

以整數個 90 度旋轉其子元件的元件。

Transform

在繪製子元件前套用轉換的元件。

Find more widgets in the widget catalog.

此頁面的內容是否對您有幫助?
感謝您的回饋!
feedback 提供詳細內容
感謝您的回饋!請告訴我們可以如何改進。
bug_report 提供詳細內容

除非另有說明,本網站上的文件反映最新的 Flutter 穩定版。頁面最後更新於 2025-10-26。 檢視原始碼 或 回報問題.

Flutter logo
除非另有註明,本站係依照 創用 CC 姓名標示 4.0 國際授權條款 授權,而程式碼範例則採用 BSD 三條款授權。
  • 使用條款
  • 品牌規範
  • 隱私權
  • 資安