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

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

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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据