Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

高斋晓开卷,独共圣人语。这篇文章主要讲述Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#相关的知识,希望能为你提供帮助。
            小菜在学习 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("测试水波纹"), ), ), )),

注意事项:
  1. 使用 InkWell 时内外层均不建议添加背景色,InkWell 默认的水波纹颜色很浅,背景色会遮挡波纹效果;
  2. 通过修改 splashColor: Colors.greenAccent, 属性可以动态修改水波纹的波纹颜色,但如果修改高亮色属性 highlightColor,则相当于修改背景色;
  3. 请一定添加 InWell 手势触发事件,如 onTap 等。 2. Stack 位置叠加
                Flutter 没有提供 Android 那么丰富的布局样式,只用 Row/Column/Stack 即可满足需求,而小菜在使用 Stack 层叠效果时发现一个很有用的属性 alignment,默认是在布局正中间,整个布局以中心点划分 x/y 轴的二维坐标系,横轴从左到右递增/纵轴从上到下递/增整体范围均为 [-1,1],可以通过设置不同的点位设置控件所在位置。
Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

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), ) ], ), ], ),

Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

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, ); }

注意事项:
  1. index 默认为 0,即如果不处理 index 属性值时默认展示第一层 Stack;
  2. index 从下标从 0 开始,层数递增,如果超过最大层数或为负数时,全部不显示。
Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

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) ]) ], ); }

注意事项:【Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#】            Table 中默认每一个 TableRow 中子 item 数量要相同,否则会报异常,如果需要合并单元格的话需要自定义单元格。
Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

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)), ], ); }

注意事项:
  1. Wrap 中内容默认是横向排列,通过调整 direction: Axis.horizontal, 属性修改排列方向;
  2. 当横向排列时 spacing: 10.0, 属性为横向 item 间距;runSpacing: 20.0, 为每一行之间的间距;当为纵向排列时,则相反。
Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

Flutter 专题18 易忽略的小而巧的技术点汇总#yyds干货盘点#

文章图片

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

    推荐阅读