如果你是一个刚开始学习或是準备要开始尝试Flutter的人，但却不知道要从哪里开始下手，这边会提供一些常用且实用的Widget来帮助大家入门！

1. Scaffold

Scaffold是一个非常重要的Widget, 他为你的App提供一个基本的架构, 使用起来非常方便, 话不多说我们直接看一下範例

Scaffold(  // 可以对 AppBar 做客製化设定, 也可以留空就不会有 AppBar  appBar: AppBar(    title: Text('App Bar Title'),  ),  // 剩余的空间  body: Center(    child: Text('Hello World!'),  ),  // 左边可以滑出来的 drawer, endDrawer则是从右边滑出来的  drawer: Drawer(    child: ListView(...)  ),  // Flutter 预设在右下角的悬浮按钮  floatingActionButton: FloatingActionButton(    // 按钮的Icon, 也可以使用Container等widget来客製化    child: Icon(...),    // 点击按钮的事件    onPress: () {}  ))

除了上面介绍的功能, Scaffold还有很多其他有用的功能像是 bottomNavigationBar 在底部有换页的按钮等功能等着大家去研究！

2. SizedBox

SizedBox是一个最基础的物件, 他只有4个参数可以输入(key, width, height, child), 我们这边先忽略key, 其他参数就是让你限制你的child的高度和宽度, 如果不写child 则会留一个空白区块, 我们有时候会用 SizedBox 来设定 Widget之间的间隔

SizedBox(  width: 100,  height: 100,  child: ABC()),

3. Container

Container算是SizedBox的进化版, 他一样可以设定 child 的宽度和高度, 但他多了一些功能, 像是可以设定背景颜色、背景图片, 也可以添加外框、改变外框粗细、颜色, 或是设定圆角等等的功能, 大家有空可以再去研究一下！

Container(  width: 100,  height: 100,  // 设定Padding  padding: const EdgeInset.all(10),  // 设定Margin  margin: const EdgeInset.all(10),  decoration: BoxDecoration(    // 设定圆角    borderRadius: BorderRadius.circular(90),    // 设定背景图片    color: Colors.yellow,    // 设定形状    shape: BoxShape.rectangle,  ))

提醒：如果只是要设定宽度和高度的话, 可以使用SizedBox()就好, 这样App的效能会比较好哦！

4. Text

Text就是一个人如其名的Widget, 他就是拿来放文字用的, 他也是有许多参数可以设定, 这边就介绍一些最基本的, 像是字体大小(font size), 字体粗度(font weight), 字体颜色, 字的对齐, 或是超出设定的大小时该如何处理, 应该要变成 ‘…’ 或是直接裁切掉等功能, 记得要帮Text设定大小(像是包在SizedBox内) 程式才会知道有没有超出哦 否则会有Bug出现！

Text(  'Hello World!',  // 当超出设定大小时 多余的字会变成 '...'  overflow: TextOverflow.ellipsis)

5. Row

Row是一个让你排列多个水平物件的Widget, 可以设定水平排列方式 或是垂直排列方式等等

Row(  // 水平排列方式是从最后往前排  mainAxisAlignment: MainAxisAlignment.end,  // 垂直排列会置中  crossAxisAlignment: CrossAxisAlignment.center,  // Row会往水平方向长到最大, min则是会变得跟children一样宽  mainAxisSize: MainAxisSize.max,  children: [    Container(),    Text(      'Hello World!',    ),  ],)

6. Column

Column则是跟Row相反, 是排列垂直物件的Widget, 一样可以设定水平和垂直的排列方式

Column(  // 垂直排列方式是从最上往下排  mainAxisAlignment: MainAxisAlignment.start,  // 水平排列会置中  crossAxisAlignment: CrossAxisAlignment.center,  // Column会往垂直方向长到最大, min则是会变得跟children一样高  mainAxisSize: MainAxisSize.max,  children: [    Container(),    Text(      'Hello World!',    ),  ],)

7. ListView

ListView是用来摆放一连串可以滑动的Widget, ListView 有多种建立的方式, 有直接使用ListView() 用法就跟Column一样 里面可以放很多样式不同的child, 如果样式都相同可以使用 ListView.builder(), ListView.separated(), 但是如果你的List非常的多, 则不推荐直接使用ListView, 而是要用ListView.builder, 因为ListView会直接将所有里面的Widget先build出来, 可能会导致画面Lag, 而builder则是会只先準备画面显示及快要显示的部分而已, 效能方面会比较好！

ListView.separated(  // 如果用不到 context 或 index 则可以改成 (_, __) { ... }  itemBuilder: (context, index) {    // 这边是处理各个 index 要产生的 Widget    return Container(),  },  // 各个 child 之间的分隔线, 我这边是使用一条线分隔, 可以根据需求来改变  separatorBuilder: (context, index) {    return const Divider(),  },  // ListView child的数量, 如果是来自api的某个list资料 就可以放 myList.length, 再根据资料客製化上方的child, myList[index]...  itemCount: 10,)

8. Spacer

Spacer就是一个来帮助排版的空白Widget, 下面直接看範例, Spacer会填满扣掉Widget之后剩余的空间

Row(  children: [    Text('A'),    Spacer(),    Text('B'),  ],)

上面这8个Widget就是我认为入门最需要知道的, 但Flutter还有许多好用、酷炫的Widget等着大家去学习!

如果大家觉得这种教学对大家有帮助，可以留言跟我说，我会继续写其他Widget的介绍！

大家也可以到我的部落格去看其他教学文章！