Flutter 常用組件對(duì)比 UIKit

Flutter 是跨平臺(tái)開發(fā)框架，如果你有 iOS 背景，理解 Flutter Widget 與 UIKit 的對(duì)應(yīng)關(guān)系，可以快速上手開發(fā)。本篇文章按照 功能分類，列出常用組件，并進(jìn)行對(duì)比。

1?? 布局類組件（Layout）

Flutter UIKit 說明
Container UIView 基本容器，可控制大小、顏色、圓角、邊框
Padding UIView + layoutMargins 內(nèi)邊距
Align / Center UIView + NSLayoutConstraint 對(duì)齊
Row UIStackView(axis: .horizontal) 水平布局
Column UIStackView(axis: .vertical) 垂直布局
Stack UIView + subviews 層疊布局
Positioned UIView.frame / NSLayoutConstraint Stack 內(nèi)定位
Expanded / Flexible UIStackView + distribution 占據(jù)剩余空間
Spacer UIView + priority 占位填充空間
SizedBox UIView(width:height:) 固定寬高，間隔

Tips：Flutter 布局聲明式，UIKit 命令式，Row/Column/Stack 類似 UIStackView 組合。

2?? 容器裝飾類

Flutter UIKit 說明
DecoratedBox UIView.layer 背景、邊框、陰影
Card UIView + layer 卡片效果
ClipRRect UIView.layer.cornerRadius + clipsToBounds 圓角裁剪
ClipOval UIView.layer.cornerRadius = w/2 圓形裁剪
Opacity UIView.alpha 透明度
Transform UIView.transform 旋轉(zhuǎn)、縮放、平移

3?? 滾動(dòng)視圖（Scroll / List）

Flutter UIKit 說明
SingleChildScrollView UIScrollView 單子 Widget 滾動(dòng)
ListView UITableView 列表
GridView UICollectionView 網(wǎng)格布局
PageView UIPageViewController 分頁(yè)滾動(dòng)
CustomScrollView + Slivers UITableView/UICollectionView + supplementary 高級(jí)可組合滾動(dòng)

4?? 輸入控件（Form / Input）

Flutter UIKit 說明
TextField UITextField 文本輸入
TextFormField UITextField + validation 內(nèi)置表單驗(yàn)證
Checkbox UIButton(custom) 多選框
Radio UIButton(custom) 單選
Switch UISwitch 開關(guān)
Slider UISlider 滑塊
DropdownButton UIPickerView / UIAlertController 下拉選擇

5?? 按鈕類（Button）

Flutter UIKit 說明
ElevatedButton UIButton + backgroundColor 高亮按鈕
TextButton UIButton title only 文字按鈕
OutlinedButton UIButton + layer.border 描邊按鈕
IconButton UIButton + image 圖標(biāo)按鈕
FloatingActionButton UIButton + 圓形 + 陰影 懸浮按鈕

6?? 文本與圖像

Flutter UIKit 說明
Text UILabel 文本顯示
RichText UILabel + NSAttributedString 富文本
SelectableText UITextView 可選文本
Image UIImageView 圖片顯示
FadeInImage UIImageView + animation 漸變加載圖片
Icon UIImageView / SF Symbol 圖標(biāo)
CircleAvatar UIImageView + cornerRadius 圓形頭像

7?? 動(dòng)畫與過渡

Flutter UIKit 說明
AnimatedContainer UIView.animate(withDuration:) 尺寸、顏色、圓角變化
AnimatedOpacity UIView.animate alpha 透明度動(dòng)畫
AnimatedAlign UIView.animate + frame/constraint 對(duì)齊動(dòng)畫
AnimatedPositioned UIView.animate + frame Stack 中位置動(dòng)畫
TweenAnimationBuilder UIViewPropertyAnimator 自定義 Tween 動(dòng)畫
Hero UINavigationController + shared element 頁(yè)面共享元素動(dòng)畫
AnimationController + AnimatedBuilder CADisplayLink + CoreAnimation 顯式動(dòng)畫

8?? 其他常用組件

Flutter UIKit 說明
Scaffold UIViewController + view 頁(yè)面腳手架
AppBar UINavigationBar 頂部導(dǎo)航欄
BottomNavigationBar UITabBar 底部導(dǎo)航欄
Drawer UISideMenuController 抽屜菜單
TabBar / TabBarView UITabBarController 標(biāo)簽頁(yè)
SnackBar UIAlertController(style: .alert) / Toast 提示
AlertDialog UIAlertController 彈窗對(duì)話框
CircularProgressIndicator UIActivityIndicatorView 圓形加載
LinearProgressIndicator UIProgressView 線性加載
Tooltip UILongPressGesture + UILabel 提示氣泡
Divider UIView(height=1) 分割線
ListTile UITableViewCell 列表項(xiàng)組合

?? 總結(jié)

  1. 布局

    • Flutter: Row/Column/Stack
    • UIKit: UIStackView + UIView

  2. 容器

    • Flutter Container 屬性豐富
    • UIKit 需要組合 UIView + layer

  3. 列表和滾動(dòng)

    • Flutter ListView/GridView ≈ UITableView/UICollectionView

  4. 動(dòng)畫

    • Flutter 隱式/顯式動(dòng)畫
    • UIKit 用 UIView.animate 或 CoreAnimation

  5. 控件和按鈕

    • Flutter 內(nèi)置豐富按鈕和狀態(tài)管理
    • UIKit 需要組合 UIButton + target/action
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容