Flutter基础介绍与实作-Day10 Nice to Meet you Widgets(1)

Widget小百科
在开始介绍前请大家一定要牢记一句话，就是「在Flutter 中万物皆为Widget」，Flutter中的Widget概念非常的广，不仅可以表示UI的元素，也可以控制一些功能性的组件，我相信大家看到这一定很疑惑，什麽是”组件”能吃吗？组件其实就是widget，只是因为不同场合要给它一个不一样的名子而已，由於Flutter主要是用来建构使用者的介面，所以只要把widget想成一个控制键就好，至於它的概念吗就大概了解一下就好啦！

Widget的功能
在Flutter 中， widget 的功能是「描述一个UI元素的配置信息」，也就是说， Widget 其实并不是表示最终绘制在使用者介面上的东西，那所谓的配置信息就是Widget 用来接收的参数，比如说对於Text 来讲，文本的内容、对齐方式、文本样式都是它的配置信息。

Basic Widget(官网请按这)
Flutter官网总共有11个例子，那这边我们会为大家一一的介绍，并附上执行结果给大家

1. AppBar(AppBar程序码)
   AppBar是基於Material Design设计风格的应用栏，一般使用在Scaffold内部，作为顶部的导航栏，以下是一个小范例，这是一个可以换页的小程序
   

以上可分为四个部分来说明：

• leading：通常是用来放logo的地方，可以选择单纯的Icon或是IconButton都可以
• title：这个是最好懂得，就是用来放标题
• action：这个可以拿来放IconButton，它的概念有点像有些购物网站的购物车按钮
• button：可以当作转换页面的按钮就像上图的>
  AppBar程序码

2. Column and Row
   这两个可以说是一样的东西，只差在垂直和水平而已，那这边就一起来讲解
   我们这边以简单的色块排列来做范例
   Column(Column程序码)
   

Row(Row程序码)

他们是不是很像啊！只有方向的区别

3. Container(Container程序码)
   你可以把Container想程序一个方框，你可以设定它的长宽、颜色等等，甚至还可以让它变型
   以下这个范例是由外层蓝色的方框(Container)包裹那层橘色的方框(Container)，然後最里面再显示文字，为了让画面好看一点我们再让这两个Container各别偏移一点，这样是不是变得很时尚啊！
   ※transform:Matrix4.rotationZ(0.1)，就是向Z轴偏移0.1的意思
   

4. Icon
   这个Icon元件相较於其他比较简单，前面也有大概说明过了，所以这里就不再多说了，大家可以到这里去Flutter Icon查看Flutter的所有Icon，如果你就得Flutter所提供的你不满意，你还可以使用font_awesome这个套件，它可以提供给你更多的选择
   ※font_awesome安装方法
   在Android Studio找到pubspec.yaml的目录，然後找到里面有写dependencies的地方加上font_awesome_flutter: any，并按下Pug get来安装
   

今日总结
今天介绍了Basic Widget 11种的其中5种，希望大家都有弄懂，明天我们会继续把没说完的补完