第一次接触到Flutter是在慕课网上,在Android课程里看看到了Flutter,当时想这是个什么语法,居然能写移动端。后来看到掘金上的介绍才知道咸鱼就是用Flutter开发的,感觉挺牛逼的。又重新在慕课网找到这个课程买下来。
经过这几天自己的研究,一切皆为组件(widget)的思想,有点懵逼。把样式跟逻辑数据放到一起写有点混乱。不如vue的简洁。
一、组件
1、基础组件:
- Container
- Row
- Column
- Image
- Text
- Icon
- RaiseButton
- Scaffold
- Appbar
- FlutterLogo
- Placeholder
二、Material Components Widgets
2.1 App结构和导航
Scaffold //Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
Appbar //一个Material Design应用程序栏,由工具栏和其他可能的widget(如TabBar和FlexibleSpaceBar)组成。
BottomNavigationBar //底部导航条,可以很容易地在tap之间切换和浏览顶级视图。
TabBar //一个显示水平选项卡的Material Design widget。
TabBarView //显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。
MaterialApp //一个方便的widget,它封装了应用程序实现Material Design所需要的一些widget
WidgetsApp //一个方便的类,它封装了应用程序通常需要的一些widget。
Drawer //从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。
2.2按钮
RaisedButton //Material Design中的button, 一个凸起的材质矩形按钮
FloatingActionButton //一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作。FloatingActionButton通常用于Scaffold.floatingActionButton字段
FlatButton //一个扁平的Material按钮
IconButton //一个Material图标按钮,点击时会有水波动画
PopupMenuButton //当菜单隐藏式,点击或调用onSelected时显示一个弹出式菜单列表
ButtonBar //水平排列的按钮组
2.3输入框和选择框
TextField //文本输入框
Checkbox //复选框,允许用户从一组中选择多个选项。
Radio //单选框,允许用户从一组中选择一个选项。
Switch //On/off 用于切换一个单一状态
Slider //滑块,允许用户通过滑动滑块来从一系列值中选择。
Date & Time Pickers //日期&时间选择器
2.4、对话框、Alert、Panel
SimpleDialog //简单对话框可以显示附加的提示或操作
AlertDialog //一个会中断用户操作的对话款,需要用户确认
BottomSheet //BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容)。你可以调用showBottomSheet()或showModalBottomSheet弹出
ExpansionPanel //具有可选操作的轻量级消息提示,在屏幕的底部显示。
2.5、 信息展示
Image
Icon
Chip
Tooltip
DataTable
Card
LinearProgressIndicator
2.6 、布局
ListTile
Stepper
Divider
以上内容图片均已截图官网页面,写了这么多的组件,先大体 的了解下,这两天按着视频教程,敲了两天了 把基本的四个组件敲了一遍,摸清了flutter的写法。但是还是蒙的。一看就会,一敲就完的状态。