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

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

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