【Flutter 专题】易忽略的【小而巧】的技术点汇总 (一)

和尚在学习 Flutter过程中遇到很多有趣的小知识点，平时可能不太注意或一些简单直接的小功能点，准备整理一个小系列，方便日后的查找使用。

1. InkWell 水波纹效果

和尚在 Android的项目中很多需要水波纹的点击效果，Flutter当然也提供了类似的效果，除了 FlatButton按钮系列外，Flutter还提供了 InkWell水波纹效果，使用很方便，在需要的地方嵌套即可；例如：用在 ListView的 item中整体效果会好很多。

注意事项：

1. 使用 InkWell时内外层均不建议添加背景色，InkWell默认的水波纹颜色很浅，背景色会遮挡波纹效果；
2. 通过修改 splashColor: Colors.greenAccent,属性可以动态修改水波纹的波纹颜色，但如果修改高亮色属性 highlightColor，则相当于修改背景色；
3. 请一定添加 InWell手势触发事件，如 onTap等。

2. Stack 位置叠加

Flutter没有提供 Android那么丰富的布局样式，只用 Row/Column/Stack即可满足需求，而和尚在使用 Stack层叠效果时发现一个很有用的属性 alignment，默认是在布局正中间，整个布局以中心点划分 x/y轴的二维坐标系，横轴从左到右递增/纵轴从上到下递/增整体范围均为 [-1,1]，可以通过设置不同的点位设置控件所在位置。

3. IndexedStack 栈式层叠效果

和尚在偶然的机会查看到比 Stack更高级一层的用法 IndexedStack，是一系列的 Stack数组，多了一个 index熟悉，根据 index显示具体的层级。和尚觉得在处理显隐性方面会起到很大作用。

注意事项：

1. index默认为 0，即如果不处理 index属性值时默认展示第一层 Stack；
2. index从下标从 0开始，层数递增，如果超过最大层数或为负数时，全部不显示。

4. Table 表格布局

和尚有个小需求是绘制各个边框，偷懒想到了 Table布局，用法与 Android的基本相同，设置每一行的 TableRow并添加相应的 item，很方便的添加 border边框，并设置边框的基本样式。

注意事项：

Table中默认每一个 TableRow中子 item数量要相同，否则会报异常，如果需要合并单元格的话需要自定义单元格。

5. Wrap 流式布局

和尚需要在每行布局中根据文字内容长度自定义展示个数，单独的用 Row和 Column不能实现很好的效果，这时候发现 Flutter提供的强大的 Wrap流式布局，自动根据需要显示的内容设置宽度，大大减少了开发的成本。对于日常的需求很方便也很快捷。

注意事项：

1. Wrap中内容默认是横向排列，通过调整 direction: Axis.horizontal,属性修改排列方向；
2. 当横向排列时 spacing: 10.0,属性为横向 item间距；runSpacing: 20.0,为每一行之间的间距；当为纵向排列时，则相反。

和尚刚接触 Flutter时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。以下是和尚公众号，欢迎闲来吐槽～