参考链接#

布局——Flutter官方文档

自适应&响应式布局——Flutter官方文档

布局结构#

在下面的示例中，下面截图显示三个带标签的图标

下面这张截图包括行和列的可视化布局。这张图中，debugPaintSizeEnabled 被设置为 true，因此可以看到可视化布局。

以下是上方示例的 widget 树示意图：

横向纵向排列#

Row 和 Column布局示例很像React中ant design，只不过flutter中的Row 和 Column适用于不一样的主题

Row 和 Column 是两种最常用的布局模式。
Row 和 Column 每个都有一个子 widget 列表。
一个子 widget 本身可以是 Row、Column 或其他复杂 widget。
可以指定 Row 或 Column 如何在垂直和水平方向上对齐其子项。
可以拉伸或限制特定的子 widget。
可以指定子 widget 如何占用 Row 或 Column 的可用空间。

布局设计示例：

flutter也有更多关于排列而已的替代方案：ListTitle和ListView

MainAxisAlignment#

MainAxisAlignment是用于横向纵向两种排列布局的类(依赖于不一样的widget，通常是作为一些widget的参数)，有多个不场景的参数。下面一些例子，我主要为横向的布局提供示例，纵向只提供一个示例，因为逻辑原理一样。

MainAxisAlignment.spaceEvenly#

MainAxisAlignment.spaceEvenly是轴心居中，但是均匀占用空间

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(MaterialApp(
5
    title: 'Shopping List',
6
    home: Scaffold(
7
      appBar: AppBar(title: Text('Shopping List')),
8
      body: Row(
9
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
10
        children: [
11
          Image.asset('assets/imgs/pic1.png'),
12
          Image.asset('assets/imgs/pic2.png'),
13
          Image.asset('assets/imgs/pic3.png'),
14
        ],
15
      ),
16
    ),
17
  ));
18
}

下面是纵向的布局，逻辑原理跟横向是相同的

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  debugPaintSizeEnabled = true;
6
  runApp(MaterialApp(
7
    title: 'Shopping List',
8
    home: Scaffold(
9
      appBar: AppBar(title: Text('Shopping List')),
10
      body: Column(
11
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
12
        children: [
13
          Image.asset('assets/imgs/pic1.png', bundle: null),
14
          const Image(image: AssetImage('assets/imgs/pic2.png')),
15
          Image.asset('assets/imgs/pic3.png')
16
        ],
17
      ),
18
    ),
19
  ));
20
}

MainAxisAlignment.center#

MainAxisAlignment.center仅是轴心居中，左右会自动分配一样的剩余空间

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  debugPaintSizeEnabled = true;
6
  runApp(MaterialApp(
7
    title: 'Shopping List',
8
    home: Scaffold(
9
      appBar: AppBar(title: Text('Shopping List')),
10
      body: Row(
11
        mainAxisAlignment: MainAxisAlignment.center,
12
        children: [
13
          Image.asset('assets/imgs/pic1.png', bundle: null),
14
          const Image(image: AssetImage('assets/imgs/pic2.png')),
15
          Image.asset('assets/imgs/pic3.png')
16
        ],
17
      ),
18
    ),
19
  ));
20
}

MainAxisAlignment.start#

MainAxisAlignment.end#

MainAxisAlignment.spaceAround#

MainAxisAlignment.spaceAround轴心居中，并会使得元素之间的间隔变大，但是左右剩余空间会变小。下面是两种不同的分辨率

MainAxisAlignment.spaceBetween#

MainAxisAlignment.spaceBetween轴心居中，左右不保留空间，间隔平均分配。下面是两种不一样的分辨率

CrossAxisAlignment.start#

当你为Row配置MainAxisAlignment.spaceEvenly时，其实默认能配置了CrossAxisAlignment.center，这是一个默认值，你即使不明确设置一样为会在设置。

当我们同时设置CrossAxisAlignment.start，会发生什么变化呢，官方对这个参数解释是：将子元素放置为起始边与横轴的起始边对齐

其实我也现在才发现，行高是以图片最大的那个设置

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  debugPaintSizeEnabled = true;
6
  runApp(MaterialApp(
7
    title: 'Shopping List',
8
    home: Scaffold(
9
      appBar: AppBar(title: Text('Shopping List')),
10
      body: Row(
11
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
12
        crossAxisAlignment: CrossAxisAlignment.start,
13
        children: [
14
          Image.asset('assets/imgs/pic1.png', bundle: null),
15
          const Image(image: AssetImage('assets/imgs/pic2.png')),
16
          Image.asset('assets/imgs/pic3.png')
17
        ],
18
      ),
19
    ),
20
  ));
21
}

前面的示例其实我没有说过，但是实际上我的图片大小是不一样，只是因为不太容易看出来，现在设置CrossAxisAlignment.start，代表横向布局中，元素是紧贴上边缘的，大小不一样会很明显

CrossAxisAlignment.end#

与CrossAxisAlignment.start相反的CrossAxisAlignment.end，代表横向布局中，元素是紧贴下边缘的

Row 不支持CrossAxisAlignment.baseline#

CrossAxisAlignment.baseline似乎用于，横向布局中文本的水本对齐，但是在ROW中如果指定了这个参数，会报错

CrossAxisAlignment.stretch#

这个参数还没有看出来什么用途，注释是这样解释的这会导致传递给子元素的约束在横轴上变得紧密

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  debugPaintSizeEnabled = true;
6
  runApp(MaterialApp(
7
    title: 'Shopping List',
8
    home: Scaffold(
9
      appBar: AppBar(title: Text('Shopping List')),
10
      body: Row(
11
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
12
        crossAxisAlignment: CrossAxisAlignment.stretch,
13
        children: [
14
          Image.asset('assets/imgs/pic1.png', bundle: null),
15
          const Image(image: AssetImage('assets/imgs/pic2.png')),
16
          Image.asset('assets/imgs/pic3.png')
17
        ],
18
      ),
19
    ),
20
  ));
21
}

图中黄白交叉的内容，是表示内容已经超出右侧屏幕。而且已经超出1458px

当图片大小太时，会明显超出屏幕，可以Expanded类来灵活调节，下面你可以看看下面两个分辨率下的布局，在大的分辨率中，会使图片使用更大宽高，或者变成原始图片的宽高。

也许你想要一个 widget 占用的空间是兄弟项的两倍。为了达到这个效果，可以使用 Expanded widget 的 flex 属性，这是一个用来确定 widget 的弹性系数的整数。默认的弹性系数为 1，以下代码将中间图像的弹性系数设置为 2：感觉加一个动画就能变成画廊了

MainAxisSize.min#

默认情况下，行或列沿其主轴会占用尽可能多的空间，但如果要将子项紧密组合在一起，请将其 mainAxisSize 设置为 MainAxisSize.min。以下示例使用此属性将星形图标组合在一起

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  final stars = Row(
6
    mainAxisSize: MainAxisSize.min,
7
    children: [
8
      Icon(Icons.star, color: Colors.green[500]),
9
      Icon(Icons.star, color: Colors.green[500]),
10
      Icon(Icons.star, color: Colors.green[500]),
11
      const Icon(Icons.star, color: Colors.black),
12
      const Icon(Icons.star, color: Colors.black),
13
    ],
14
  );
15

16
  final ratings = Container(
17
    padding: const EdgeInsets.all(20),
18
    child: Row(
19
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
20
      children: [
21
        stars,
22
        const Text(
23
          '170 Reviews',
24
          style: TextStyle(
25
            color: Colors.black,
26
            fontWeight: FontWeight.w800,
27
            fontFamily: 'Roboto',
28
            letterSpacing: 0.5,
29
            fontSize: 20,
30
          ),
31
        ),
32
      ],
33
    ),
34
  );
35

36
  debugPaintSizeEnabled = true;
37
  runApp(MaterialApp(
38
    title: 'Shopping List',
39
    home: Scaffold(
40
      appBar: AppBar(title: Text('Shopping List')),
41
      body: Row(
42
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
43
        crossAxisAlignment: CrossAxisAlignment.center,
44
        children: [ratings],
45
      ),
46
    ),
47
  ));
48
}

通用布局#

flutter提供的widget分为widget库中标准Widget、Material库和Cupertino库（IOS UI），标准Widget是通用的，但是Material库和Cupertino库中的Widget只能应用在自己的主题中。

Scaffold: 提供结构化的布局框架，为常用的 Material Design 应用元素提供插槽。

AppBar: 创建一个显示在屏幕顶部的横条。

Card: 将相关信息整理到一个有圆角和阴影的盒子中。

ListTile: 将最多三行的文本、可选的导语以及后面的图标组织在一行中。

CupertinoPageScaffold the basic layout structure for an iOS-style page.

CupertinoNavigationBar an iOS-style navigation bar at the top of the screen.

CupertinoSegmentedControl a segmented control for selecting.

CupertinoTabBar and CupertinoTabScaffold the characteristic iOS bottom tab bar.

Container：向 widget 增加padding、margins、borders、background color 或者其他的“装饰”。

GridView:将 widget 展示为一个可滚动的网格。

ListView:将 widget 展示为一个可滚动的列表。

Stack:将 widget 覆盖在另一个的上面。

Container#

1
Widget _buildImageColumn() {
2
  return Container(
3
    decoration: const BoxDecoration(color: Colors.black26),
4
    child: Column(children: [_buildImageRow(1), _buildImageRow(3)]),
5
  );
6
}
7
Widget _buildDecoratedImage(int imageIndex) => Expanded(
8
  child: Container(
9
    decoration: BoxDecoration(
10
      border: Border.all(width: 10, color: Colors.black38),
11
      borderRadius: const BorderRadius.all(Radius.circular(8)),
12
    ),
13
    margin: const EdgeInsets.all(4),
14
    child: Image.asset('images/pic$imageIndex.jpg'),
15
  ),
16
);
17

18
Widget _buildImageRow(int imageIndex) => Row(
19
  children: [
20
    _buildDecoratedImage(imageIndex),
21
    _buildDecoratedImage(imageIndex + 1),
22
  ],
23
);

GridView#

在网格中使用 widget
当列的内容超出渲染容器的时候，它会自动支持滚动。
创建自定义的网格，或者使用下面提供的网格的其中一个：

GridView.count 允许你制定列的数量

GridView.extent 允许你制定单元格的最大宽度

`GridView.extent`#

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  List<Widget> _buildGridTileList(int count) =>
5
      List.generate(count, (i) => Image.asset('assets/imgs/pic$i.png'));
6

7
  Widget _buildGrid() => GridView.extent(
8
        maxCrossAxisExtent: 150,
9
        padding: const EdgeInsets.all(4),
10
        mainAxisSpacing: 4,
11
        crossAxisSpacing: 4,
12
        children: _buildGridTileList(30),
13
      );
14

15
  runApp(MaterialApp(
16
      title: 'Shopping List',
17
      home: Scaffold(
18
          appBar: AppBar(title: Text('Shopping List')),
19
          body: Container(child: _buildGrid()))));
20
}

因为我的图片资源只有6个，所以其他都没却显示，每次滚动到CardView里面的新item时，都rebuild UI

横屏模式下的状态如下，箭头和蓝色方格是因为开启了debug

`GridView.count`#

GridView.count不能设定maxCrossAxisExtent，可以设置crossAxisCount，这个表示当超过指定的数量后会自动换行，无论是横屏还是竖屏状态。如果横屏状态，宽度的增加不会使单行的item增加，而是拉大item的宽高

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  List<Widget> _buildGridTileList(int count) =>
6
      List.generate(count, (i) => Image.asset('assets/imgs/pic$i.png'));
7

8
  Widget _buildGrid() => GridView.count(
9
        crossAxisCount: 3,
10
        padding: const EdgeInsets.all(4),
11
        mainAxisSpacing: 4,
12
        crossAxisSpacing: 4,
13
        children: _buildGridTileList(30),
14
      );
15

16
  debugPaintSizeEnabled = true;
17
  runApp(MaterialApp(
18
      title: 'Shopping List',
19
      home: Scaffold(
20
          appBar: AppBar(title: Text('Shopping List')),
21
          body: Container(child: _buildGrid()))));
22
}

竖屏状态：横屏状态：

ListView#

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  ListTile _tile(String title, String subtitle, IconData icon) {
6
    return ListTile(
7
      title: Text(
8
        title,
9
        style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
10
      ),
11
      subtitle: Text(subtitle),
12
      leading: Icon(icon, color: Colors.blue[500]),
13
    );
14
  }
15

16
  Widget _buildList() {
17
    return ListView(
18
      children: [
19
        _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),
20
        _tile('The Castro Theater', '429 Castro St', Icons.theaters),
21
        _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),
22
        _tile('Roxie Theater', '3117 16th St', Icons.theaters),
23
        _tile(
24
          'United Artists Stonestown Twin',
25
          '501 Buckingham Way',
26
          Icons.theaters,
27
        ),
28
        _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),
29
        const Divider(),
30
        _tile('K\'s Kitchen', '757 Monterey Blvd', Icons.restaurant),
31
        _tile('Emmy\'s Restaurant', '1923 Ocean Ave', Icons.restaurant),
32
        _tile('Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),
33
        _tile('La Ciccia', '291 30th St', Icons.restaurant),
34
      ],
35
    );
36
  }
37

38
  debugPaintSizeEnabled = true;
39
  runApp(MaterialApp(
40
      title: 'Shopping List',
41
      home: Scaffold(
42
          appBar: AppBar(title: Text('Shopping List')),
43
          body: Container(child: _buildList()))));
44
}

Stack#

Stack可以覆盖在另一个widget之上，比如在图片添加标注的文本的功能。

1
import 'package:flutter/material.dart';
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  debugPaintSizeEnabled = true;
6
  runApp(MaterialApp(
7
      title: 'Shopping List',
8
      home: Scaffold(
9
          appBar: AppBar(title: Text('Shopping List')), body: _buildStack())));
10
}
11

12
Widget _buildStack() {
13
  return Stack(
14
    alignment: const Alignment(0.6, 0.6),
15
    children: [
16
      const CircleAvatar(
17
        backgroundImage: AssetImage('assets/imgs/pic6.png'),
18
        radius: 100,
19
      ),
20
      Container(
21
        decoration: const BoxDecoration(color: Colors.black45),
22
        child: const Text(
23
          'Mia B',
24
          style: TextStyle(
25
            fontSize: 20,
26
            fontWeight: FontWeight.bold,
27
            color: Colors.white,
28
          ),
29
        ),
30
      ),
31
    ],
32
  );
33
}

Card#

可以实现带有卡片效果的Widget

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(MaterialApp(
5
      title: 'Shopping List',
6
      home: Scaffold(
7
          appBar: AppBar(title: Text('Shopping List')), body: _buildCard())));
8
}
9

10
Widget _buildCard() {
11
  return SizedBox(
12
    height: 210,
13
    child: Card(
14
      child: Column(
15
        children: [
16
          ListTile(
17
            title: const Text(
18
              '1625 Main Street',
19
              style: TextStyle(fontWeight: FontWeight.w500),
20
            ),
21
            subtitle: const Text('My City, CA 99984'),
22
            leading: Icon(Icons.restaurant_menu, color: Colors.blue[500]),
23
          ),
24
          const Divider(),
25
          ListTile(
26
            title: const Text(
27
              '(408) 555-1212',
28
              style: TextStyle(fontWeight: FontWeight.w500),
29
            ),
30
            leading: Icon(Icons.contact_phone, color: Colors.blue[500]),
31
          ),
32
          ListTile(
33
            title: const Text('costa@example.com'),
34
            leading: Icon(Icons.contact_mail, color: Colors.blue[500]),
35
          ),
36
        ],
37
      ),
38
    ),
39
  );
40
}

构建响应式布局#

本次只讲解三种监听屏幕变化的方式，如果有机会再看看是否单开一篇去总结响应式布局。

响应式布局就是能实时根据屏幕的大小，做不一样布局显示，比如你将屏幕横屏时，屏幕的宽度就变大了，那么原先的布局就不合适了。

下面是三种监听屏幕大小变化的方法

特性	`MediaQuery.sizeOf`	`MediaQuery.of`	`LayoutBuilder`
监听范围	仅监听 `size` 变化	监听所有 MediaQuery 数据	监听父级约束（constraints）
重建触发	仅屏幕尺寸变化时重建	任何系统数据变化都重建（亮度、字体、方向等）	父级约束变化时重建
性能	✅ 最好	⚠️ 较差（过度重建）	✅ 好
获取数据	屏幕物理尺寸	完整的 MediaQueryData	父容器分配的约束空间

性能差异的原因

1
// MediaQuery.sizeOf - 性能最好 ⭐
2
// 底层使用了 InheritedModel，只订阅 size 这一个属性
3
final size = MediaQuery.sizeOf(context);
4
// 只有当屏幕尺寸改变时才重建（如旋转屏幕）
5

6
// MediaQuery.of - 性能较差
7
// 订阅整个 MediaQueryData 对象
8
final mq = MediaQuery.of(context);
9
final size = mq.size;
10
// 亮度变化、文字缩放、时间格式变化、安全区变化...都会触发重建！

LayoutBuilder，我觉得更适合构建那种移动的窗口，比如弹窗，可调整大小的窗口，因为LayoutBuilder是监听父级约束的变化的。

下面是大概的用法

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(MaterialApp(
5
      title: 'Flutter layout demo',
6
      home: Scaffold(
7
          appBar: AppBar(title: Text('Flutter layout demo')),
8
          body: LayoutBuilder(
9
            builder: (context, constraints) {
10
              MediaQueryData mediaQuery = MediaQuery.of(context);
11
              print("Screen width: ${mediaQuery.size.width}");
12
              print("Screen height: ${mediaQuery.size.height}");
13

14
              //test for MediaQueryData.sizeOf
15
              print("Size of: ${MediaQuery.sizeOf(context)}");
16
              print("Size of width: ${MediaQuery.sizeOf(context).width}");
17
              print("Size of height: ${MediaQuery.sizeOf(context).height}");
18
              if (constraints.maxWidth > 600) {
19
                return _buildWideContainers();
20
              } else {
21
                return _buildNormalContainer();
22
              }
23
            },
24
          ))));
25
}
26

27
Widget _buildNormalContainer() {
28
  return Container(
29
    color: Colors.blue,
30
    child: Text('Normal Container'),
31
  );
32
}
33

34
Widget _buildWideContainers() {
35
  return Container(
36
    color: Colors.green,
37
    child: Text('Wide Containers'),
38
  );
39
}

竖屏状态：

横屏状态：

日志打印：竖屏：

1
Screen width: 375
2
Screen height: 667
3
Size of: Size(375.0, 667.0)
4
Size of width: 375
5
Size of height: 667

横屏：

1
Screen width: 667
2
Screen height: 375
3
Size of: Size(667.0, 375.0)
4
Size of width: 667
5
Size of height: 375

参考链接#

布局结构#

横向纵向排列#

MainAxisAlignment#

MainAxisAlignment.spaceEvenly#

MainAxisAlignment.center#

MainAxisAlignment.start#

MainAxisAlignment.end#

MainAxisAlignment.spaceAround#

MainAxisAlignment.spaceBetween#

CrossAxisAlignment.start#

CrossAxisAlignment.end#

Row 不支持CrossAxisAlignment.baseline#

CrossAxisAlignment.stretch#

调整widget的大小#

MainAxisSize.min#

通用布局#

Material Widget#

Cupertino Widget#

标准widget#

Container#

GridView#

`GridView.extent`#

`GridView.count`#

ListView#

Stack#

Card#

构建响应式布局#

参考链接#

布局结构#

横向纵向排列#

MainAxisAlignment#

MainAxisAlignment.spaceEvenly#

MainAxisAlignment.center#

MainAxisAlignment.start#

MainAxisAlignment.end#

MainAxisAlignment.spaceAround#

MainAxisAlignment.spaceBetween#

CrossAxisAlignment.start#

CrossAxisAlignment.end#

Row 不支持CrossAxisAlignment.baseline#

CrossAxisAlignment.stretch#

调整widget的大小#

MainAxisSize.min#

通用布局#

Material Widget#

Cupertino Widget#

标准widget#

Container#

GridView#

GridView.extent#

GridView.count#

ListView#

Stack#

Card#

构建响应式布局#

`GridView.extent`#

`GridView.count`#