Flutter组件介绍

Flutter 是 Google 开源的跨平台移动开发框架,它能够使开发者快速的构建出美观的、高性能的移动应用程序。

Flutter的核心理念:一切皆为Widget。手机应用里的所有东西都是Widget,开发者通过可组合的空间集合、丰富的动画库实现了富有感染力应用界面设计。

Flutter组件介绍

Flutter的UI库里面有两套小部件—— Material Design(适用于 Android )和 Cupertino(适用于 iOS )今天,通过Flutter Gallery,也就是一个demo来给大家展示Flutter的组件。


首先是Material Design 风格的的组件

底部导航栏(Bottom navigation)

底部导航栏分为固定以及渐变导航,由图标以及文字组成

Flutter组件介绍

按钮(Buttons)

按钮有图标按钮,扁平按钮,浮动按钮等等

Flutter组件介绍

卡片(Card)

卡片包括了图片、标题以及操作按钮

Flutter组件介绍

芯片(chips)

这个有点类似于一个badge,可以当作标签使用

Flutter组件介绍

日期和时间选择器(Date and time pickers)

Flutter组件介绍

对话框(Dialog)

Flutter组件介绍


侧边导航 (Navigation drawer)

可以在侧边添加一些菜单选项

Flutter组件介绍

可展开列表 (Expand/collapse list control)

Flutter组件介绍


浮动按钮 (Floating Action Bar)

Flutter组件介绍


网格布局 (Grid list)

Flutter组件介绍


图标 (Icon)

Flutter组件介绍

进度指示 (Progress indictors)

分为圆形和条状的进度指示

Flutter组件介绍

可滚动的标签页 (Scrollable tabs)

Flutter组件介绍


滑动条 (Sliders)

分为连续以及不连续的滑动条

Flutter组件介绍


下面是iOS风格的组件

按钮(Buttons)

Flutter组件介绍


对话框 (Dialog)

Flutter组件介绍


滑动条 (Sliders)

Flutter组件介绍


切换按钮 (Switches)

Flutter组件介绍


导航 (Navigation)

Flutter组件介绍


以上就是Flutter中的所有的组件,需要用时可以参考。


相关文章: