写点什么

flutter 系列之:flutter 中的 Wrap

作者:程序那些事
  • 2022 年 6 月 22 日
  • 本文字数:2231 字

    阅读完需:约 7 分钟

flutter系列之:flutter中的Wrap

简介

我们在 flutter 中使用能够包含多个 child 的 widget 的时候,经常会遇到超出边界范围的情况,尤其是在 Column 和 Row 的情况下,那么我们有没有什么好的解决办法呢?答案就是今天我们要讲解的 Wrap。

Row 和 Column 的困境

Row 和 Column 中可以包含多个子 widget,如果子 widget 超出了 Row 或者 Column 的范围会出现什么情况呢?


我们以 Row 的情况举个例子:


  Widget build(BuildContext context) {    return Row(      textDirection: TextDirection.ltr,      mainAxisAlignment: MainAxisAlignment.spaceEvenly,      children: [        YellowBox(),        YellowBox(),        Expanded(          child: YellowBox(),        ),        YellowBox(),      ],    );  }
复制代码


上面的例子中,我们在 Row 中添加了几个 YellowBox,YellowBox 是一个 width=100,height=50 的长方形:


  Widget build(BuildContext context) {    return Container(      width: 100,      height: 50,      decoration: BoxDecoration(        color: Colors.yellow,        border: Border.all(),      ),    );  }
复制代码


运行上面的代码,我们可以得到这样的界面:



如果在 Row 中多添加几个 YellowBox 会有什么效果呢?


我们在上面的 Row 中多添加一个 yellowBox:


  Widget build(BuildContext context) {    return Row(      textDirection: TextDirection.ltr,      mainAxisAlignment: MainAxisAlignment.spaceEvenly,      children: [        YellowBox(),        YellowBox(),        Expanded(          child: YellowBox(),        ),        YellowBox(),        YellowBox(),      ],    );  }
复制代码


运行可以得到下面的界面:



可以看到,因为 Row 中的子 widget 太多了,已经超出了 Row 的范围,界面上已经报错了。


要解决这个问题,就需要使用到 Wrap 组件。

Wrap 组件详解

先来看下 Wrap 的定义:


class Wrap extends MultiChildRenderObjectWidget
复制代码


Wrap 继承自 MultiChildRenderObjectWidget,表示可以包含多个子 child。


接下来是 Wrap 的构造函数:


  Wrap({    Key? key,    this.direction = Axis.horizontal,    this.alignment = WrapAlignment.start,    this.spacing = 0.0,    this.runAlignment = WrapAlignment.start,    this.runSpacing = 0.0,    this.crossAxisAlignment = WrapCrossAlignment.start,    this.textDirection,    this.verticalDirection = VerticalDirection.down,    this.clipBehavior = Clip.none,    List<Widget> children = const <Widget>[],  }) : assert(clipBehavior != null), super(key: key, children: children);
复制代码


构造函数中列出了 Wrap 中常用的属性。


其中 direction 表示子组件的排列方向。alignment 表示的是子组件的对其方式。spacing 表示子组件的间隔。


跟 spacing 类似的还有一个 runSpacing 属性,两者有什么区别呢? 我们还是通过一个具体的例子来查看。


  Widget build(BuildContext context) {    return Wrap(      direction: Axis.horizontal,      textDirection: TextDirection.ltr,      children: [        YellowBox(),        YellowBox(),        // Expanded(        //   child: YellowBox(),        // ),        YellowBox(),        YellowBox(),        YellowBox(),      ],    );
复制代码


还是上面的例子,这里我们使用 Wrap 来替换 Row,这里我们使用了 direction 选项,表示是在横向方向进行 Wrap。


然后在 children 中添加了 5 个 YellowBox。


注意,这里不能使用 Expanded,否则会报错,所以我们把 Expanded 注释掉了,运行可以得到下面的界面:



可以看到 YellowBox 是按行的方向来排列的,超出一行的范围之后就会自动换行,这也就是 Wrap 的功能。


我们在讲解 Wrap 的时候,还提到了两个属性,分别是 spacing 和 runSpacing。两者有什么区别呢?


先看下 spacing:


  Widget build(BuildContext context) {    return Wrap(      direction: Axis.horizontal,      spacing: 10,      textDirection: TextDirection.ltr,      children: [        YellowBox(),        YellowBox(),        // Expanded(        //   child: YellowBox(),        // ),        YellowBox(),        YellowBox(),        YellowBox(),      ],    );  }
复制代码


我们先给 Wrap 添加 spacing 属性,运行可以得到下面的界面:



可以看到 YellowBox 之间是用 spacing 来进行分割的。


那么如果我们希望在 Wrap 换行的时候,两行之间也有一些间距应该怎么处理呢?


这个时候就需要用到 runSpacing 属性了:


  Widget build(BuildContext context) {    return Wrap(      direction: Axis.horizontal,      spacing: 10,      runSpacing: 10,      textDirection: TextDirection.ltr,      children: [        YellowBox(),        YellowBox(),        // Expanded(        //   child: YellowBox(),        // ),        YellowBox(),        YellowBox(),        YellowBox(),      ],    );  }
复制代码


运行可以得到下面的界面:



Wrap 已经完美的运行了。

总结

Wrap 可以通过使用不同的 direction 来替换 Row 或者 Column,我们在组件可能会超出范围的时候,就可以考虑使用 Wrap 了。


本文的例子:https://github.com/ddean2009/learn-flutter.git


更多内容请参考 www.flydean.com

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!

发布于: 2022 年 06 月 22 日阅读数: 20
用户头像

关注公众号:程序那些事,更多精彩等着你! 2020.06.07 加入

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧,尽在公众号:程序那些事!

评论

发布
暂无评论
flutter系列之:flutter中的Wrap_flutter_程序那些事_InfoQ写作社区