Flutter基础-Flutter概述

Flutter基础-Flutter概述

来源: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg

作者: The Net NinJa

 

视频看完了，这节课内容非常少，就想说两件事儿：

1. 在Flutter中,一切即Widget 

2. 它是使用Dart语言开发的

在下节课之前，我们只需要知道这俩件事儿就行了，具体的细节，会在后面的课程中都给大家讲出来的，先不用着急。

 

Flutter 核心设计思想

Everything’s a Widget

在Flutter的世界里，一切皆是Widget。听起来感觉很抽象，我们先不用去纠结它这句话。我们暂时只需要知道，在Flutter中有Widget这个东西，而且他很重要就可以了 。因为当你学完这一系列的课程之后，你自然会明白。那时我想让你自己去总结一下，为什么他会说Everything's a Widget。

 

Flutter中常用的Widget

 

基础Widget

1. Image 

一个显示图片的Widget

2.Text  

单一格式的文本

3. Button

一个按钮Widget

4. TextField 

输入框Widget

 

布局Widget

 

1. Container 

一个拥有绘制、定位、调整大小的 Widget

2. Row  

在水平方向上排列子Widget的列表

3. Column  

在垂直方向上排列子widget的列表

4. Stack 

可以允许其子widget简单的堆叠在一起

 

交互Widget

 

1. GestureDetector  

一个检测手势的widget

2. LongPressDraggable 

可以使其子widget在长按时可拖动

3. DragTarget 

一个拖动的目标widget，在完成拖动时它可以接收数据

 

Material Components

 

1. Scaffold 

Material Design布局结构的基本实现。此类提供了用于显示Drawer、Snackbar和底部Sheet的API。

2. Appbar

一个Material Design应用程序栏，由工具栏和其他可能的Widget（如TabBar和FlexibleSpaceBar）组成。

3. BottomNavigationBar

底部导航条，可以很容易地在tap之间切换和浏览顶级视图。

4. TabBar

一个显示水平选项卡的Material Design widget。

5. Drawer

从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。

 

动画 & Motion Widget

 

1. AnimatedContainer 

在一段时间内逐渐改变其值的容器

2. RotationTransition 

对Widget使用旋转动画

3. FadeTransition 

对透明度使用动画的widget

4.ScaleTransition 

对widget使用缩放动画

---

 

Ok, 其实上面那些东西在Flutter中文网也能看到，我只是总结了一些比较基础的，常见的Widget，但是他真的很重要！今天，我们只是从UI布局方面简单的了解了下Widget，其实它还有很多东西需要我们继续去探索。但是！在现在这个阶段，我们只需要知道什么是Widget，Widget长什么样，就可以了。在后面的课程中，我们会在使用的过程中让你更加深刻的理解它，一起期待吧。

 

作业：把下面今日推荐的两篇文章看完

 

学习完成别忘了打卡哦～，大家一起学习交流才更有趣。在下方评论留言 “打卡第*天”，大家互相监督，一起进步吧！

 

亦可加微信：wtr513 备注: "Flutter 技术交流", 进群和大家一起学习。

关注公众号“bsmg513”，跟我们一起打卡学习吧。

 

今日推荐文章:

Flutter学习指南：

https://juejin.im/post/5bd54b7be51d456c430e35f6  【刚哥出品】

Flutter快速上车之Widget:

https://juejin.im/post/5b8ce76f51882542c0626887 【咸鱼出品】