Flutter 常用组件对比 UIKit

Flutter 是跨平台开发框架，如果你有 iOS 背景，理解 Flutter Widget 与 UIKit 的对应关系，可以快速上手开发。本篇文章按照 功能分类，列出常用组件，并进行对比。

1️⃣ 布局类组件（Layout）

Flutter UIKit 说明
Container UIView 基本容器，可控制大小、颜色、圆角、边框
Padding UIView + layoutMargins 内边距
Align / Center UIView + NSLayoutConstraint 对齐
Row UIStackView(axis: .horizontal) 水平布局
Column UIStackView(axis: .vertical) 垂直布局
Stack UIView + subviews 层叠布局
Positioned UIView.frame / NSLayoutConstraint Stack 内定位
Expanded / Flexible UIStackView + distribution 占据剩余空间
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 旋转、缩放、平移

3️⃣ 滚动视图（Scroll / List）

Flutter UIKit 说明
SingleChildScrollView UIScrollView 单子 Widget 滚动
ListView UITableView 列表
GridView UICollectionView 网格布局
PageView UIPageViewController 分页滚动
CustomScrollView + Slivers UITableView/UICollectionView + supplementary 高级可组合滚动

4️⃣ 输入控件（Form / Input）

Flutter UIKit 说明
TextField UITextField 文本输入
TextFormField UITextField + validation 内置表单验证
Checkbox UIButton(custom) 多选框
Radio UIButton(custom) 单选
Switch UISwitch 开关
Slider UISlider 滑块
DropdownButton UIPickerView / UIAlertController 下拉选择

5️⃣ 按钮类（Button）

Flutter UIKit 说明
ElevatedButton UIButton + backgroundColor 高亮按钮
TextButton UIButton title only 文字按钮
OutlinedButton UIButton + layer.border 描边按钮
IconButton UIButton + image 图标按钮
FloatingActionButton UIButton + 圆形 + 阴影 悬浮按钮

6️⃣ 文本与图像

Flutter UIKit 说明
Text UILabel 文本显示
RichText UILabel + NSAttributedString 富文本
SelectableText UITextView 可选文本
Image UIImageView 图片显示
FadeInImage UIImageView + animation 渐变加载图片
Icon UIImageView / SF Symbol 图标
CircleAvatar UIImageView + cornerRadius 圆形头像

7️⃣ 动画与过渡

Flutter UIKit 说明
AnimatedContainer UIView.animate(withDuration:) 尺寸、颜色、圆角变化
AnimatedOpacity UIView.animate alpha 透明度动画
AnimatedAlign UIView.animate + frame/constraint 对齐动画
AnimatedPositioned UIView.animate + frame Stack 中位置动画
TweenAnimationBuilder UIViewPropertyAnimator 自定义 Tween 动画
Hero UINavigationController + shared element 页面共享元素动画
AnimationController + AnimatedBuilder CADisplayLink + CoreAnimation 显式动画

8️⃣ 其他常用组件

Flutter UIKit 说明
Scaffold UIViewController + view 页面脚手架
AppBar UINavigationBar 顶部导航栏
BottomNavigationBar UITabBar 底部导航栏
Drawer UISideMenuController 抽屉菜单
TabBar / TabBarView UITabBarController 标签页
SnackBar UIAlertController(style: .alert) / Toast 提示
AlertDialog UIAlertController 弹窗对话框
CircularProgressIndicator UIActivityIndicatorView 圆形加载
LinearProgressIndicator UIProgressView 线性加载
Tooltip UILongPressGesture + UILabel 提示气泡
Divider UIView(height=1) 分割线
ListTile UITableViewCell 列表项组合

🔹 总结

  1. 布局

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

  2. 容器

    • Flutter Container 属性丰富
    • UIKit 需要组合 UIView + layer

  3. 列表和滚动

    • Flutter ListView/GridView ≈ UITableView/UICollectionView

  4. 动画

    • Flutter 隐式/显式动画
    • UIKit 用 UIView.animate 或 CoreAnimation

  5. 控件和按钮

    • Flutter 内置丰富按钮和状态管理
    • UIKit 需要组合 UIButton + target/action
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容