Flutter 布局（八）- 框架布局控件 Stack、IndexedStack、GridView详解

Flutter 布局

Flutter 是一个流行的跨平台 UI 开发框架，它使用 Dart 语言编写。Flutter 具有丰富的布局控件，可以帮助我们轻松创建各种各样的用户界面。

Stack

Stack 是一个堆栈布局控件，它可以将多个子控件堆叠在一起。子控件的绘制顺序由它们在 Stack 中的顺序决定，最早添加的子控件最先绘制。Stack 可以用来创建绝对布局，即子控件的位置不受父控件的影响。

IndexedStack

IndexedStack 是一个索引堆栈布局控件，它可以根据索引值来显示不同的子控件。IndexedStack 非常适合用于创建页面切换效果。

GridView

GridView 是一个网格布局控件，它可以将子控件排列成网格状。GridView 非常适合用于创建列表视图、图片库等。

List 和 ListView

List 是一个数据结构，它可以存储一组有序的数据。ListView 是一个列表视图控件，它可以将 List 中的数据以列表的形式显示出来。ListView 非常适合用于创建列表视图、聊天记录等。

Column 和 Row

Column 是一个列布局控件，它可以将子控件排列成一列。Row 是一个行布局控件，它可以将子控件排列成一行。Column 和 Row 非常适合用于创建表单、导航栏等。

结语

Stack、IndexedStack、GridView、List、ListView、Column 和 Row 是 Flutter 布局中最常用的控件。掌握了这些控件的使用方法，我们就可以轻松创建各种各样的用户界面。

附录

1. Stack 的布局行为

Stack 的布局行为与绝对布局类似。子控件的位置不受父控件的影响。子控件的位置由其 left、top、right 和 bottom 属性决定。

2. IndexedStack 的索引值

IndexedStack 的索引值是一个整数，它指定要显示的子控件的索引。索引值从 0 开始，最大值为子控件的数量减一。

3. GridView 的网格布局

GridView 的网格布局可以分为两种：固定网格布局和自适应网格布局。固定网格布局的网格大小是固定的，自适应网格布局的网格大小会根据父控件的大小而变化。

4. List 和 ListView 的数据源

List 是一个数据结构，它可以存储一组有序的数据。ListView 的数据源是一个 List。

5. Column 和 Row 的方向

Column 的方向是垂直的，Row 的方向是水平的。