Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Flutter布局

Flutter搞定宽高不统一布局开发的方法详解

作者:岛上码农

我们在开发移动端界面的时候,经常会遇到一组尺寸不一的组件需要作为同一组展示,所以本文就将利用Wrap组件搞定宽高不统一布局开发,需要的可以参考一下

前言

我们在开发移动端界面的时候,经常会遇到一组尺寸不一的组件需要作为同一组展示,典型的就是下面这种搜索历史。搜索内容的文字长短不一,导致显示的宽度不一致。而且,需要根据屏幕的宽度来自动换行显示。这个时候,用行布局或者网格布局都满足不了要求,那怎么办呢?其实 Flutter 为我们提供了很好的组件,那就是Wrap组件。

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>[],
})

其中关键参数如下:

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组件。

总结

本篇介绍了 Wrap 组件的定义和使用,如果有遇到子组件的尺寸不统一(通常会是横向的宽度,纵向的高度),那么优先建议使用 Wrap 组件来实现。典型的应用场景就是历史搜索、标签显示等等。而且,如果是数量有限的网格式的布局(比如相关商品推荐),其实也可以用 Wrap 组件来替换 GridView 组件。本篇源码已上传至:实用组件相关代码

到此这篇关于Flutter搞定宽高不统一布局开发的方法详解的文章就介绍到这了,更多相关Flutter布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文