《Flutter》-- 5.Flutter页面布局

爱学习的程序媛

发布于 2022-04-07 16:22:29

9770

发布于 2022-04-07 16:22:29

文章被收录于专栏：学习/读书笔记

参阅书籍：

《Flutter跨平台开发入门与实践》-- 向治洪（著）

5. Flutter页面布局

5.1 盒约束模型

盒约束是指组件可以按照指定限制条件来决定如何布局自身位置。Flutter提供的尺寸限制类容器可以用于限制容器的大小，并提供了多种约束容器组件，常见的有ConstrainedBox、SizedBox和UnconstrainedBox。

5.1.1 ConstrainedBox

用来对子组件添加额外的约束。

构造函数格式：

ConstrainedBox({
  Key key,
  @required this.constraints,//给子组件添加额外的约束
  Widget child,
})

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(BoxWidget());

class BoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '盒约束模型',
      home: Scaffold(
        appBar: AppBar(title: Text('盒约束模型--ConstrainedBox')),
        body: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 50,
              maxWidth: 100,
              minHeight: 50,
              maxHeight: 100
            ),
            child: Container(
              width: 80,
              height: 5,
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.red
                )
              )
            )
         )
      )
    );
  }
}

示例效果：

BoxConstraints常见的构造函数：

1）BoxConstraints.tight()：创建一个生成给定大小的限制约束布局；

2）BoxConstraints.expand()：创建一个尽可能大的用于填充另一个容器的约束布局；

3）BoxConstraints.tightForFinite()：创建一个最大值是确定值的松散约束布局；

4）BoxConstraints.tightFor()：创建一个不限最大值的松散约束布局。

5.1.2 SizedBox

用于给子组件指定固定的宽高。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(BoxWidget());

class BoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '盒约束模型',
      home: Scaffold(
        appBar: AppBar(title: Text('盒约束模型--SizedBox')),
        body: SizedBox(
            width: 100,
            height: 100,
            child: Container(
              width: 80,
              height: 5,
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.red
                )
              )
            )
         )
      )
    );
  }
}

示例效果：

5.1.3 UnconstrainedBox

不会对子组件产生任何限制，它允许子组件按照自己本身的大小进行绘制，可以去除多重约束的限制。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(BoxWidget());

class BoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '盒约束模型',
      home: Scaffold(
        appBar: AppBar(title: Text('盒约束模型--UnconstrainedBox')),
        body: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 100,
              minHeight: 100,
            ),
            child: UnconstrainedBox(
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red
              )
            )
        )
      )
    );
  }
}

示例效果：

UnconstrainedBox对父级的约束并非是真正的去除，父组件的限制依然生效，只不过它不影响子组件显示大小，但仍然会占据相应的空间。

5.2 线性布局

线性布局指的是沿水平或垂直方向排布子组件的布局方式。Flutter使用Row或Column来实现线性布局，作用类似于Android的线性布局（LinearLayout），且Row和Column都继承自弹性布局。

线性布局有主轴和纵轴之分。如果布局沿水平方向排列，那么水平方向就是主轴，垂直方向为纵轴；如果布局沿垂直方向排列，那么垂直方向就是主轴，水平方向为纵轴。

Row表示在水平方向排列子组件，Column表示在垂直方向排列子组件，支持的属性如下：

1）mainAxisAlignment：表示子组件在主轴的对齐方式；

2）mainAxisSize：表示主轴应该占用多大空间；

3）crossAxisAlignment：表示子组件在交叉轴的对齐方式；

4）textDirection：表示子组件在主轴方向上的布局顺序；

5）verticalDirection：表示子组件在交叉轴方向上的布局顺序；

6）textBaseline：排列子组件时使用的基线标准；

7）children：线性布局里排列的内容。

5.3 弹性布局

Flutter中使用Flex来实现弹性布局，类似于CSS的FlexBox，支持的属性如下：

1）direction：主轴的方向；

2）mainAxisAlignment：子组件在主轴的对齐方式；

3）mainAxisSize：主轴占用的空间大小；

4）crossAxisAlignment：子组件在交叉轴的对齐方式；

5）textDirection：子组件在主轴方向上的布局顺序；

6）verticalDirection：子组件在交叉轴方向上的布局顺序；

7）textBaseline：排列子组件时使用的基线标准；

8）children：弹性布局里排列的内容。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(FlexWidget());

class FlexWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '页面布局',
      home: Scaffold(
        appBar: AppBar(title: Text('页面布局--弹性布局')),
        body: Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                height: 50,
                color: Colors.red
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                height: 50,
                color: Colors.green
              ),
            ),
             Expanded(
              flex: 1,
              child: Container(
                height: 50,
                color: Colors.blue
              ),
            ),
          ],
        )
      )
    );
  }
}

示例效果：

Flex组件与Expanded组件可以让Row、Column、Flex的子组件具有弹性能力。当子组件超过主轴的大小时会自动换行；当还有剩余空间时，Expanded组件会占满剩余的所有空间，而Flexible组件只会占用自身大小的空间。

5.4 流式布局

流式布局指的是页面元素的宽度可以根据屏幕的分辨率适配调整，但整体布局风格保持不变。

Flutter中使用Wrap来实现流式布局，支持的属性如下：

1）direction：主轴的方向，默认是Axis.horizontal；

2）alignment：子组件在主轴上的对齐方式；

3）runAlignment：流式布局会自动换行或换列，runAlignment属性指的是每行或每列的对齐方式；

4）runSpacing：每行或每列的间距，默认是0.0；

5）crossAxisAlignment：子组件在交叉轴上的对齐方式；

6）textDirection：子组件在主轴方向上的布局顺序；

7）verticalDirection：子组件在交叉轴方向上的布局顺序；

8）children：流式布局里的子组件。 示例代码：

import 'package:flutter/material.dart';

void main() => runApp(WrapWidget());

class WrapWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '页面布局',
      home: Scaffold(
        appBar: AppBar(title: Text('页面布局--流式布局')),
        body: Wrap(
          spacing: 8,
          runSpacing: 4,
          children: <Widget>[
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('S')
              ),
              label: Text('少年的你'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('Z')
              ),
              label: Text('中国机长'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('W')
              ),
              label: Text('我和我的祖国'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('Z')
              ),
              label: Text('终结者：黑暗命运'),
            ),
          ]
        )
      )
    );
  }
}

示例效果：

5.5 层叠布局

层叠布局是指子组件可以根据父组件的位置来确定自身位置的布局。层叠布局允许子组件以堆叠的方式来排列子组件，它和Web中的绝对定位、Android中的Frame布局类似。

Flutter使用Stack和Positioned两个组件来配合实现绝对定位，Stack组件主要用于子组件的堆叠操作，而Positioned组件则用于确定子组件在Stack组件中的位置。

层叠布局支持的属性如下：

1）alignment：决定如何去对齐没有定位或者部分定位的子组件；

2）textDirection：用于确定alignment的对其方向；

3）fit：用于决定non-positioned子组件如何去适应层叠布局的大小；

4）overflow：当子组件超出Stack组件的范围时，决定如何显示超出的子组件；

5）children：Stack组件里排列的内容。

在层叠布局中，先排列的子组件会出现在视图的底部，后排列的则会显示在上面。Stack组件将子组件分为无定位的子组件和有定位的子组件。

无定位的子组件不被Positioned组件嵌套，需要设置alignment属性来确定自己在父组件里面的位置。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(StackWidget());

class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '页面布局',
      home: Scaffold(
        appBar: AppBar(title: Text('页面布局--层叠布局')),
        body: Stack(
          alignment: const Alignment(0, 0),
          children: <Widget>[
            Container(
              constraints: BoxConstraints.tightFor(width: 200, height: 150),
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.red, Colors.orange],
                  center: Alignment.topLeft,
                  radius: .98
                ),
              ),
            ),
            Text(
              'Hello Flutter',
              style: TextStyle(
                fontSize: 24,
                color: Colors.white
              )
            )
          ],
        )
      )
    );
  }
}

示例效果：

有定位的子组件被Positioned组件嵌套，Positioned组件可以控制子组件到父组件4条边的距离。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(StackWidget());

class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '页面布局',
      home: Scaffold(
        appBar: AppBar(title: Text('页面布局--层叠布局')),
        body: Stack(
          children: <Widget>[
            Positioned(
              left: 30, 
              top: 40,
              child: Container(
                constraints: BoxConstraints.tightFor(width: 200, height: 150),
                decoration: BoxDecoration(
                  gradient: RadialGradient(
                    colors: [Colors.red, Colors.orange],
                    center: Alignment.topLeft,
                    radius: .98
                  ),
                ),
              ), 
            ),
            Positioned(
              left: 60, 
              top: 105,
              child: Text(
                'Hello Flutter',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white
                )
              )
            ),
          ],
        )
      )
    );
  }
}

示例效果：