如何在APP中实现各种布局效果？学会这些控件就够了

大家好，关于如何在APP中实现各种布局效果？学会这些控件就够了很多朋友都还不太明白，今天小编就来为大家分享关于的知识，希望对各位有所帮助！

俗话说：工欲善其事，必先利其器。花时间掌握基本控制是非常有必要的！

1. 行、列

1. 功能

Flutter中非常常见的多子节点控件，它将子节点排列成一行。它可能是基于Web中的Flex布局，所以很多属性和性能都与它相似。但请注意，它不具有滚动属性。如果超过一行，debug下会显示溢出提示。

2.属性

MainAxisAlignment：主轴方向的对齐方式会影响子项的位置。默认为启动。

其中MainAxisAlignment枚举值：

center：将子项放置在主轴的中心； end：将子项放置在主轴的末端； spaceAround：在主轴方向上均分空白区域，使得children之间的空白面积相等，但第一个和最后一个children的空白面积为1/2； spaceBetween：在主轴方向上均分空白区域，使子项之间的空白区域相等，并且第一个和最后一个子项靠近第一个和最后一个子项，没有间隙； spaceEvenly：将空白区域在主轴方向上均分，使子项之间的空白区域面积相等，包括第一个和最后一个子项； start：将子项放置在主轴的起点； spaceAround、spaceBetween 和spaceEvenly 的区别是对待第一个和最后一个孩子的方式。距起点和终点的距离分别为空白区域的1/2、0和1。

MainAxisSize：主轴方向占用的空间值，默认为max。

MainAxisSize有两个值：

max：根据传递的布局约束，最大化主轴方向的可用空间； min：与max相反，最小化主轴方向的可用空间； CrossAxisAlignment：子项在横轴方向的对齐方式，与MainAxisAlignment略有不同。

CrossAxisAlignment枚举值如下：

Baseline：在横轴方向，对齐children的基线； center：子项显示在横轴的中心； end：子项显示在横轴的末端； start：子项显示在横轴上的起点；拉伸：让孩子填满横轴方向； TextDirection：阿拉伯语语言的兼容设置，一般不需要处理。

VerticalDirection：定义子项的放置顺序。默认为向下。

VerticalDirection 枚举值有两种类型：

down：从上到下布局； up：从下到上的布局。如果top对应的是Row和Column，那就是左边和顶部。如果是底部，则为右侧和底部。

TextBaseline：TextBaseline的使用方法有两种，之前已经介绍过。

3.使用场景

Row 和Column 是非常常用的布局控件。一般情况下，例如需要将控件显示在一行或一列中时，可以使用它。但这并不意味着只能使用Row或Column进行布局。也可以使用Stack，具体取决于具体的场景选择。

4、代码

child: 行(

mainAxisAlignment: MainAxisAlignment.spaceAround，

kids: 小部件[

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item1’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item2’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item3’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item4’),),

],

),

5、效果

改变MainAxisAlignment的值后，显示如下效果：

2. 堆栈

1. 功能

堆栈可以与网络中的绝对布局进行比较。绝对布局在移动开发中一般较少使用，但在某些场景下，它还是有它的作用的。当然，用Stack绝对布局可以完成的事情，也可以用其他控件组合来完成。

2.属性

alignment：对齐方式，默认为左上角（topStart）。

textDirection：文本的方向，大部分不需要处理。

fit：定义如何设置非定位节点的大小。默认是宽松的。

其中，StackFit有以下几种类型：

loose：子节点取loose值，大小可以从min到max； Expand：子节点占用尽可能多的空间，取max size； passthrough：不改变子节点的约束。 Overflow：多余的部分是否被剪掉。

3.使用场景

Stack的场景还是很多的。对于需要叠加显示的布局，一般可以使用Stack。

4、代码

Stack(//第一个子控件在底部

alignment: 新的对齐方式(0.6, 0.6),

//统计

kids: 小部件[

新对齐（

alignment: FractionalOffset.center,

child: new Image.network(//加载网络图片

‘http://p1.toutiaoimg.com/large/dfic-imagehandler/9fe64c3e-c51e-4644-bac9-421948e1744d’,

高度： 300.0,

宽度： 300.0,

Repeat: ImageRepeat.repeat,//图像重复方法

),

),

新的不透明度（

opacity: 0.5,//不透明度

child: 新容器(

宽度： 300.0,

高度： 400.0,

color: 颜色.蓝色，

),

),

新的不透明度（

不透明度： 0.3,

child: 新容器(

宽度： 200.0,

高度： 200.0,

color: 颜色.红色，

),

),

],

),

5、效果

3.索引堆栈

1. 功能

IndexedStack继承自Stack。它的作用是显示索引子项，其他子项是不可见的。因此，IndexedStack的大小始终与最大子节点的大小相同。

2.属性

index: 显示控件的序列号。

3.使用场景

如果需要显示一堆控件中的一个，可以使用IndexedStack。

4、代码

修改Stack中的代码如下：

索引堆栈(

index: 0,//显示第0个孩子

5、效果

4. 网格视图

1. 功能

可滚动的多列列表。

2.属性

scrollDirection：滚动的方向，有垂直和水平两种。默认为垂直（Axis.vertical）。

反向：默认是从上或左滚动到下或右。该属性控制是否反转方向。默认值为false，并且不反向滚动。

控制器：控制子项滚动时的位置。

Primary：是否是与父节点的PrimaryScrollController关联的主滚动视图。

物理：滚动视图如何响应用户输入。

ShrinkWrap：滚动视图内容是否应具有由正在查看的内容确定的滚动方向。

padding：周围的空白区域。

gridDelegate：控制GridView中子节点布局的委托。

cacheExtent：缓存区域。

3.使用场景

它是一个很常见的控件，使用场景很多。

4、代码

列表字符串getDataList() {

ListString列表=[];

for (int i=0; i 100; i++) {

list.add(i.toString());

}

返回列表；

}

ListWidget getWidgetList() {

返回getDataList().map((item)=getItemContainer(item)).toList();

}

小部件getItemContainer(String item) {

返回容器（

alignment: 对齐中心，

child: 文本(

物品，

style: TextStyle(color: Colors.white, fontSize: 20),

),

color: 颜色.蓝色，

）；

}

(1)写法一：GridView.count

GridView.count(

//水平方向子Widget之间的间距

crossAxisSpacing: 10.0,

//垂直子Widget之间的间距

mainAxisSpacing: 30.0,

//GridView内边距

padding: EdgeInsets.all(10.0),

//连续Widget的个数

crossAxisCount: 2,

//SubWidget宽高比

childAspectRatio: 2.0,

//子控件列表

kids: getWidgetList(),

）；

(2)编写方法二：GridView.biluder

小部件构建（BuildContext上下文）{

ListString datas=getDataList();

返回GridView.builder(

itemCount: 数据长度，

//SliverGridDelegateWithFixedCrossAxisCount 构造一个横轴固定数量的Widget

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

//横轴元素个数

crossAxisCount: 3,

//纵轴间距

mainAxisSpacing: 20.0,

//横轴间距

crossAxisSpacing: 10.0,

//子组件宽高长比例

childAspectRatio: 1.0),

itemBuilder:（BuildContext 上下文，int 索引）{

//小部件函数（BuildContext上下文，int索引）

返回getItemContainer(数据[索引]);

});

}

(3)编写方法三：GridView.custom

小部件构建（BuildContext上下文）{

ListString datas=getDataList();

返回GridView.custom(

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount（

crossAxisCount: 3、mainAxisSpacing: 10.0、crossAxisSpacing: 20.0、)、

childDelegate: SliverChildBuilderDelegate((上下文，位置) {

返回getItemContainer(数据[位置]);

}, childCount: datas.length));

}

5、效果

5. 流程

1. 功能

如前所述，Flow 是一个实现流布局算法的控件。

2.属性

delegate：影响Flow具体布局的FlowDelegate。

FlowDelegate包含以下方法：

getConstraintsForChild: 设置每个子项的布局约束，这将覆盖现有的； getSize：设置Flow的大小； PaintChildren：子进程的绘图控制代码，可以调整大小和位置，写起来比较繁琐； shouldRepaint：是否需要重绘； shouldRelayout ：是否需要重新布局。其中，我们平时使用的时候，一般会使用paintChildren和shouldRepaint这两个方法。

3.使用场景

Flow在一些定制的流程布局上有可用的场景，但一般编写起来比较复杂，但在灵活性和效率方面表现出色。

六、表

1. 功能

每个移动布局中都会有一个表格布局，这种控件太常见了。至于其表现形式，我们可以借鉴其他移动终端。通俗地说，就是一张桌子。

2.属性

columnWidths：设置每列的宽度。

defaultColumnWidth：每列的默认宽度值，默认均分。

textDirection：文本方向，一般不需要考虑。

边框：表格边框。

defaultVerticalAlignment：每个单元格的垂直对齐方式。

总共包含5种：

顶部：放置在顶部； middle：垂直居中；底部：放置在底部； Baseline：文本基线对齐方式； fill：填充整个单元格。 textBaseline：当defaultVerticalAlignment为基线时使用该属性。

3.使用场景

在一些需要表格显示的场景下，可以使用Table控件。

7. 包裹

1. 功能

看介绍，其实Flow可以非常轻松、更加灵活地实现Wrap的效果。

2.属性

Direction：主轴（mainAxis）的方向，默认为水平。

Alignment：主轴方向对齐，默认为start。

间距：主轴方向的间距。

runAlignment：运行对齐。 Run可以理解为新的行或列。如果是水平布局，run可以理解为换行。

runSpacing：运行间距。

crossAxisAlignment：crossAxis方向的对齐方式。

textDirection：文本方向。

VerticalDirection：定义子项的放置顺序。默认为向下。参见Flex相关属性的介绍。

3.使用场景

对于一些需要child按照宽度或者高度自动换行的场景，可以使用，但是对于Wrap能够满足的场景，Flow肯定可以实现，但是会复杂很多，但是相对会多一些灵活高效。

4、代码

裹（

kids: 小部件[

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item1’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item2’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item3’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item4’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item5’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item6’),),

容器（

color:Colors.blue,

padding: EdgeInsets.all(20),

child:Text(‘item7’,),

],

),

5、效果

8. 列表体

1. 功能

ListBody是一个不常直接使用的控件。它通常与ListView 或Column 等控件一起使用。 ListBody的作用是按照给定的轴方向按顺序排列子节点。

2.属性

mainAxis：排列的主轴方向。

反向：是否反向。

3.使用场景

当子节点需要按顺序排列时使用。

9. 列表视图

1. 功能

ListView是一个非常常用的控件。当涉及到数据列表显示时，一般都会用到这个控件。 ListView 与GridView 类似。

2.属性

itemExtent：ListView中每一项在滚动方向的高度值。

其他属性与GridView类似，这里不再介绍。

3.使用场景

ListView的使用场景太多了。一般在列表显示的时候都会选择ListView。

但需要注意的一点是，ListView的标准构造函数适用于数量比较少的场景。如果数量比较多，最好使用ListView.builder。

ListView 的标准构造函数将立即创建所有项目，而ListView.builder 将创建滚动到屏幕的项目。

4、代码

列表视图（

kids: 小部件[

列表图块（

title: 文本(‘项目1’),

subtitle:Text(‘子项目1’),

领先：图标（Icons.message），

),

列表图块（

title: 文本(‘项目2’),

subtitle:Text(‘子项目2’),

领先：图标（Icons.message），

),

列表图块（

title: 文本(‘item3’),

subtitle:Text(‘subitem3’),

领先：图标（Icons.message），

),

列表图块（

title: 文本(‘item4’),

subtitle:Text(‘subitem4’),

领先：图标（Icons.message），

),

列表图块（

title: 文本(‘item5’),

subtitle:Text(‘subitem5’),

领先：图标（Icons.message），

),

列表图块(

title: 文本(‘项目6’),

subtitle:Text(‘子项目6’),

领先：图标（Icons.message），

),

],

）

5、效果

用户评论

あ浅浅の嘚僾

这篇博文写得真棒！我一直在困扰怎么实现APP里各种各样的布局效果，现在看到这些控件就能基本解决了我的疑问了。感觉很受用啊！

    有10位网友表示赞同！

情如薄纱

我也是学编程新手经常碰壁，不知道怎么调整APP框架，导致布局总是错乱，看完这篇文章感觉找到了方向，要好好学习一下啊！

    有19位网友表示赞同！

素婉纤尘

对于我这种刚开始接触Android开发的人来说，这篇博文简直是救星！介绍得非常清晰详细，还附上代码示例，太棒了！

    有19位网友表示赞同！

凉凉凉”凉但是人心

确实，学习一些常用的布局控件真的很重要，虽然文章内容比较浅显，但对我来说还是很有帮助的。希望能看到更多深入的内容讲解，比如如何使用这些控件实现复杂布局。

    有13位网友表示赞同！

泪湿青衫

这几个控件确实很常用，但是实际操作中遇到各种边界问题，比如尺寸冲突、元素排版等等情况就需要结合具体的场景来应对，文章这里只说明了基本原理，如果能结合实例讲解更详细一些就更好啦！

    有16位网友表示赞同！

何年何念

我总觉得这种布局方式太局限了，限制不了自由创意的表达，是不是存在更灵活的布局方案呢？期待作者分享更多想法！

    有16位网友表示赞同！

有你，很幸福

我觉得这篇文章写的有点过于浅层，没有深入讲解每个控件的特点和应用场景，也缺乏对复杂布局的设计思路的介绍，对我来说不太有帮助。

    有19位网友表示赞同！

暖瞳

对于想要快速了解APP布局基本概念的人来说，这篇文章还是挺不错的入门读物。建议作者可以加入一些更丰富的案例和代码示例，更容易理解和运用。

    有8位网友表示赞同！

失心疯i

我尝试了一下文章中的代码，发现了一些小问题，需要仔细调试才能实现预期效果。文章中建议修改的部分可能需要注意，不能盲目使用。

    有10位网友表示赞同！

你的眸中有星辰

看了这篇博文后，让我对APP设计有了更直观的理解。以前经常在模仿别人的案例的时候遇到布局上的难题，现在明白了原理就好办了！

    有13位网友表示赞同！

仅有的余温

我想要实现一个自定义的折叠界面效果，不知道这些控件能否帮我完成？文章里提到了很多常用的组合方式，希望作者能分享更多进阶技巧。

    有8位网友表示赞同！

眉黛如画

写这篇博文的人真专业，能把一些很复杂的布局知识用通俗易懂的方式解释清楚。我以前总是觉得这方面很费力，现在感觉学习起来没那么难了！

    有8位网友表示赞同！

凉月流沐@

想要设计更美观、更高效的APP界面，掌握这些控件确实很重要。希望作者可以继续更新更多关于UI设计方面的文章，分享你的经验和灵感。

    有15位网友表示赞同！

十言i

我觉得这篇文章对小白来说讲解得不错，但是对于有一定编程基础的人来说可能过于简单了，希望能提供更深入的内容分析及应用技巧。

    有17位网友表示赞同！

涐们的幸福像流星丶

我之前已经学习过一些基本布局代码了，看了这篇博文发现了不少新的知识点和技巧，很有收获！特别是关于多重嵌套布局的讲解，让我明白了很多之前困惑的东西。

    有9位网友表示赞同！