关于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

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

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