??????小菜在學(xué)習(xí) Flutter 過程中遇到很多有趣的小知識點钞支，平時可能不太注意或一些簡單直接的小功能點，準備整理一個小系列竿刁，方便日后的查找使用盒卸。
1. InkWell 水波紋效果
??????小菜在 Android 的項目中很多需要水波紋的點擊效果，Flutter 當(dāng)然也提供了類似的效果结执，除了 FlatButton 按鈕系列外度陆，Flutter 還提供了 InkWell 水波紋效果，使用很方便献幔，在需要的地方嵌套即可懂傀；例如：用在 ListView 的 item中整體效果會好很多。
new Container(
child: new InkWell(
// highlightColor: Colors.red,
splashColor: Colors.greenAccent,
onTap: () {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text('Tap'),
));
},
child: Container(
width: 120.0,
height: 40.0,
child: new Center( child: new Text("測試水波紋"), ),
),
)),
注意事項：
- 使用 InkWell 時內(nèi)外層均不建議添加背景色斜姥，InkWell 默認的水波紋顏色很淺鸿竖，背景色會遮擋波紋效果；
- 通過修改 splashColor: Colors.greenAccent, 屬性可以動態(tài)修改水波紋的波紋顏色铸敏，但如果修改高亮色屬性 highlightColor缚忧，則相當(dāng)于修改背景色；
- 請一定添加 InWell 手勢觸發(fā)事件杈笔，如 onTap 等闪水。
2. Stack 位置疊加
??????Flutter 沒有提供 Android 那么豐富的布局樣式，只用 Row/Column/Stack 即可滿足需求蒙具，而小菜在使用 Stack 層疊效果時發(fā)現(xiàn)一個很有用的屬性 alignment球榆，默認是在布局正中間，整個布局以中心點劃分 x/y 軸的二維坐標系禁筏，橫軸從左到右遞增/縱軸從上到下遞/增整體范圍均為 [-1,1]持钉，可以通過設(shè)置不同的點位設(shè)置控件所在位置。
child: new ListView(
children: <Widget>[
new Stack(
alignment: AlignmentDirectional.topCenter,
children: <Widget>[
Container( height: 200.0, color: Colors.blueGrey, ),
new Text( "AlignmentDirectional.topCenter (0.0, -1.0)", style: new TextStyle(color: Colors.white), )
],
),
new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
Container( height: 200.0, color: Colors.blueAccent, ),
new Text( "AlignmentDirectional.center (0.0, 0.0)", style: new TextStyle(color: Colors.white), )
],
),
new Stack(
alignment: AlignmentDirectional.bottomEnd,
children: <Widget>[
Container( height: 200.0, color: Colors.greenAccent, ),
new Text( "AlignmentDirectional.bottomEnd (-1.0, -1.0)", style: new TextStyle(color: Colors.white), )
],
),
new Stack(
alignment: Alignment(-0.5, -0.5),
children: <Widget>[
Container( height: 200.0, color: Colors.redAccent, ),
new Text( "AlignmentDirectional (-0.5, -0.5)", style: new TextStyle(color: Colors.white), )
],
),
],
),
3. IndexedStack 棧式層疊效果
??????小菜在偶然的機會查看到比 Stack 更高級一層的用法 IndexedStack篱昔，是一系列的 Stack 數(shù)組每强，多了一個 index 熟悉，根據(jù) index 顯示具體的層級州刽。小菜覺得在處理顯隱性方面會起到很大作用空执。
Widget childIndexedStack(BuildContext context) {
return new IndexedStack(
index: 1, // 代表第二層
children: <Widget>[
new Column(
children: <Widget>[ new Icon(Icons.looks_one, color: Colors.blueAccent), new Text("第一頁") ],
),
new Column(
children: <Widget>[ new Icon( Icons.looks_two, color: Colors.greenAccent ), new Text("第二頁") ],
),
new Column(
children: <Widget>[ new Icon(Icons.looks_3, color: Colors.redAccent), new Text("第三頁") ],
),
new Column(
children: <Widget>[ new Icon(Icons.looks_4, color: Colors.yellowAccent), new Text("第四頁") ],
)
],
alignment: Alignment.center,
);
}
注意事項：
- index 默認為 0，即如果不處理 index 屬性值時默認展示第一層 Stack穗椅；
- index 從下標從 0 開始辨绊，層數(shù)遞增，如果超過最大層數(shù)或為負數(shù)時匹表，全部不顯示门坷。
4. Table 表格布局
??????小菜有個小需求是繪制各個邊框宣鄙，偷懶想到了 Table 布局，用法與 Android 的基本相同默蚌，設(shè)置每一行的 TableRow 并添加相應(yīng)的 item框冀，很方便的添加 border 邊框，并設(shè)置邊框的基本樣式敏簿。
Widget childTableWid(BuildContext Context) {
return new Table(
border: new TableBorder.all(
color: Colors.blueAccent, width: 1.0, style: BorderStyle.solid),
children: <TableRow>[
new TableRow(children: <Widget>[
new Text("姓名", textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
new Text("地址", textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0))
]),
new TableRow(children: <Widget>[
new Text("唐三藏", textAlign: TextAlign.center),
new Text("北京市海淀區(qū)", textAlign: TextAlign.center)
]),
new TableRow(children: <Widget>[
new Text("孫悟空", textAlign: TextAlign.center),
new Text("北京市朝陽區(qū)", textAlign: TextAlign.center)
]),
new TableRow(children: <Widget>[
new Text("豬八戒", textAlign: TextAlign.center),
new Text("北京市西城區(qū)北京市西城區(qū)北京市西城區(qū)北京市西城區(qū)", textAlign: TextAlign.center)
]),
new TableRow(children: <Widget>[
new Text("沙僧", textAlign: TextAlign.center),
new Text("北京市東城區(qū)北京市東城區(qū)北京市東城區(qū)北京市東城區(qū)", textAlign: TextAlign.center)
])
],
);
}
注意事項：
??????Table 中默認每一個 TableRow 中子 item 數(shù)量要相同明也，否則會報異常，如果需要合并單元格的話需要自定義單元格惯裕。
5. Wrap 流式布局
??????小菜需要在每行布局中根據(jù)文字內(nèi)容長度自定義展示個數(shù)温数，單獨的用 Row 和 Column 不能實現(xiàn)很好的效果，這時候發(fā)現(xiàn) Flutter 提供的強大的 Wrap 流式布局蜻势，自動根據(jù)需要顯示的內(nèi)容設(shè)置寬度撑刺，大大減少了開發(fā)的成本。對于日常的需求很方便也很快捷握玛。
Widget childWrapWid(BuildContext context) {
return new Wrap(
spacing: 10.0,
direction: Axis.horizontal,
alignment: WrapAlignment.start,
children: <Widget>[
new Text("今日熱點", style: new TextStyle(fontSize: 16.0)),
new Text("新聞早知道", style: new TextStyle(fontSize: 16.0)),
new Text("政情一點通", style: new TextStyle(fontSize: 16.0)),
new Text("我愛北京", style: new TextStyle(fontSize: 16.0)),
new Text("贊", style: new TextStyle(fontSize: 16.0)),
new Text("話題+", style: new TextStyle(fontSize: 16.0)),
new Text("聊一聊", style: new TextStyle(fontSize: 16.0)),
new Text("生活小常識", style: new TextStyle(fontSize: 16.0)),
new Text("段子手", style: new TextStyle(fontSize: 16.0)),
new Text("天氣預(yù)報", style: new TextStyle(fontSize: 16.0)),
new Text("重大看點", style: new TextStyle(fontSize: 16.0)),
new Text("新聞小助手", style: new TextStyle(fontSize: 16.0)),
],
);
}
注意事項：
- Wrap 中內(nèi)容默認是橫向排列够傍，通過調(diào)整 direction: Axis.horizontal, 屬性修改排列方向；
- 當(dāng)橫向排列時 spacing: 10.0, 屬性為橫向 item 間距挠铲；runSpacing: 20.0, 為每一行之間的間距冕屯；當(dāng)為縱向排列時，則相反拂苹。
??????小菜剛接觸 Flutter 時間不長安聘，還有很多不清楚和不理解的地方，如果又不對的地方還希望多多指出瓢棒。
來源：阿策小和尚
