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

关注

发布于: 2021 年 11 月 05 日

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

1. InkWell 水波纹效果

小菜在 Android 的项目中很多需要水波纹的点击效果，Flutter 当然也提供了类似的效果，除了 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 时内外层均不建议添加背景色，InkWell 默认的水波纹颜色很浅，背景色会遮挡波纹效果；
通过修改 splashColor: Colors.greenAccent, 属性可以动态修改水波纹的波纹颜色，但如果修改高亮色属性 highlightColor，则相当于修改背景色；
请一定添加 InWell 手势触发事件，如 onTap 等。

2. Stack 位置叠加

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

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 数组，多了一个 index 熟悉，根据 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 开始，层数递增，如果超过最大层数或为负数时，全部不显示。

4. Table 表格布局

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

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("北京市海淀区", textAlign: TextAlign.center)      ]),      new TableRow(children: <Widget>[        new Text("孙悟空", textAlign: TextAlign.center),        new Text("北京市朝阳区", textAlign: TextAlign.center)      ]),      new TableRow(children: <Widget>[        new Text("猪八戒", textAlign: TextAlign.center),        new Text("北京市西城区北京市西城区北京市西城区北京市西城区", textAlign: TextAlign.center)      ]),      new TableRow(children: <Widget>[        new Text("沙僧", textAlign: TextAlign.center),        new Text("北京市东城区北京市东城区北京市东城区北京市东城区", textAlign: TextAlign.center)      ])    ],  );}

复制代码

注意事项：

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

5. Wrap 流式布局

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

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("天气预报", style: new TextStyle(fontSize: 16.0)),      new Text("重大看点", style: new TextStyle(fontSize: 16.0)),      new Text("新闻小助手", style: new TextStyle(fontSize: 16.0)),    ],  );}

复制代码

注意事项：

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

小菜刚接触 Flutter 时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。

来源：阿策小和尚

发布于: 2021 年 11 月 05 日阅读数: 4

原文链接:【http://xie.infoq.cn/article/f2ca22e136161a3c313056de2】。文章转载请联系作者。

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

发布

暂无评论

创作场景

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

1. InkWell 水波纹效果

注意事项：

2. Stack 位置叠加

3. IndexedStack 栈式层叠效果

注意事项：

4. Table 表格布局

注意事项：

5. Wrap 流式布局

注意事项：

阿策小和尚

评论