前言

咱们在开发移动端界面的时分，经常会遇到一组尺度不一的组件需求作为同一组展现，典型的便是下面这种查找前史。查找内容的文字长短不一，导致显现的宽度不一致。并且，需求依据屏幕的宽度来自动换行显现。这个时分，用行布局或者网格布局都满意不了要求，那怎么办呢？其实 Flutter 为咱们供给了很好的组件，那便是Wrap组件。

Flutter 搞定宽高不统一的布局开发

Wrap 组件简介

Wrap组件是一种动态布局组件，非常适用于需求动态调整子组件布局的场景，当子组件的总宽度或高度超越父容器的宽度或高度时，它会自动将子组件放置到新的行或列中。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>[],
})

其中关键参数如下：

  • direction：布局方向，默许横向，即横向摆不下的时分会另起一行；假如更改为纵向（vertical），那么会按纵向排布，纵向排不下的时分会另起一列。一般横向布局会多一点。
  • alignment：主轴对齐方法，默许是 start，横向来说是左对齐。也能够设置为右对齐（end），或居中（center）.
  • spacing：横轴方向的间距巨细。
  • runSpacing：纵轴方向的间距巨细。
  • verticalDirection：换行或换列的方向，默许是往下，假如改成向上（up），那么超出后会往上（横向）另起一行，也便是从底部往上换行。这种其实比较少见。
  • children：也便是要子组件，一般会合作 Chip、InputChip 这样的组件运用，其实任何组件都能够，比方图片，按钮都没问题。

Wrap 运用示例

咱们这里运用 Wrap 组件包裹了 Chip 组件和图片组件，代码如下。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey[50],
    appBar:
        AppBar(title: const Text('Wrap'), backgroundColor: Colors.red[400]!),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Wrap(
            direction: Axis.horizontal,
            spacing: 8.0,
            alignment: WrapAlignment.start,
            verticalDirection: VerticalDirection.down,
            children: List.generate(
              _tagsLists.length,
              (index) => Chip(
                label: Text(_tagsLists[index]),
                backgroundColor: Colors.grey[300],
                labelStyle: const TextStyle(color: Colors.black87),
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: List.generate(
              _imagesLists.length,
              (index) => Container(
                width: 120,
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: DecorationImage(
                    image: AssetImage(_imagesLists[index]),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    ),
  );
}

实现的作用如下图所示。能够看到，完全能够满意查找页或者是详情页的标签布局运用。并且，假如是数量有限的图片、按钮这类的，也能够运用 Wrap 来代替GridView组件。

Flutter 搞定宽高不统一的布局开发

总结

本篇介绍了 Wrap 组件的界说和运用，假如有遇到子组件的尺度不一致（一般会是横向的宽度，纵向的高度），那么优先建议运用 Wrap 组件来实现。典型的应用场景便是前史查找、标签显现等等。并且，假如是数量有限的网格式的布局（比方相关商品引荐），其实也能够用 Wrap 组件来替换 GridView 组件。本篇源码已上传至：有用组件相关代码。

我是岛上码农，微信公众号同名。如有问题能够加本人微信沟通，微信号：island-coder。

：觉得有收获请点个赞鼓舞一下！

：收藏文章，方便回看哦！

：评论沟通，相互进步！