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

第

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

目录前言Wrap组件简介Wrap使用示例总结

前言

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

Wrap组件简介

Wrap组件是一种动态布局组件，非常适用于需要动态调整子组件布局的场景，当子组件的总宽度或高度超过父容器的宽度或高度时，它会自动将子组件放置到新的行或列中。Wrap组件的定义如下：

Wrap({

Keykey,

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,

ListWidgetchildren=constWidget[],

})

其中关键参数如下：

direction：布局方向，默认横向，即横向摆不下的时候会另起一行；如果更改为纵向（vertical），那么会按纵向排布，纵向排不下的时候会另起一列。通常横向布局会多一点。alignment：主轴对齐方式，默认是start，横向来说是左对齐。也可以设置为右对齐（end），或居中（center）.spacing：横轴方向的间距大小。runSpacing：纵轴方向的间距大小。verticalDirection：换行或换列的方向，默认是往下，如果改成向上（up），那么超出后会往上（横向）另起一行，也就是从底部往上换行。这种其实比较少见。children：也就是要子组件，通常会配合Chip、InputChip这样的组件使用，其实任何组件都可以，比如图片，按钮都没问题。

Wrap使用示例

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

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

backgroundColor:Colors.grey[50],

appBar:

AppBar(title:constText(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:constTextStyle(color:Colors.black87),

constSizedBox(

height:20.0,

Wrap(

spacing:8.0,

runSpacing:8.0,

children:List.generate(

_imagesLists.length,

(index)=Container(

width:120,

height:100,

decoration:BoxDecoration(

borderRadius:Bord