Flutter 容器盒子模型的使用示例

更新时间：2021年05月19日 11:46:01 作者：岛上码农

在网页开发中，有盒子模型，号称统一三端的 Flutter 也不例外，而且和 HTML 的盒子模型几乎是一样的，本篇文章通过简单的例子说明一下 Flutter 的盒子模型，方便以后再做界面时可以更好的理解布局。

在讲 Flutter 的盒子模型前，先看看HTML 中的盒子模型。如下图所示，一个页面元素包括了与父级容器的外边距（margin），自身内容与边框的内边距（padding）。外边距和内边距都可以通过 LTRB （左、上、右、下）单独设定四个方向的大小。

Flutter 的盒子模型和 HTML 的是一样的，而通用的容器 Container 就相当于是一个通用的容器，和 HTML 的 div 标签一样。如果要控制一个元素的尺寸，外边距，内边距和边框，最通用的做法是使用 Container 容器将元素包裹。当然 Flutter 也提供了一些更为具体的布局组件方便开发，例如：

SizedBox：指定尺寸的容器。
ConstaintedBox：带约束条件的容器，如限制最小最大宽度和高度。
DecoratedBox：带装饰的容器，比如渐变色。
RotatedBox：旋转一定角度的容器。

上面这些组件实际都可以通过 Container 的参数设置完成，只是开发的时候使用具体的容器可以减少组件参数。

样例代码

下面就使用一个具体的例子来说明盒子模型的具体概念，由于这里不涉及数据变化引起界面变化，因此直接使用 Stateless 无状态组件，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 盒子模型',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('盒子模型'),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Container(
              color: Colors.red,
              margin: EdgeInsets.fromLTRB(10, 0, 20, 30),
              child: Container(
                margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                color: Colors.white60,
                child: Text('这是一长段文字，这是一长段文字,这是一长段文字，这是一长段文字,这是一长段文字，这是一长段文字'),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这里在 body里的组件层级如下：

Center：居中组件。
- Container：300 x 300大小，颜色为蓝色，为最外层组件。
  - Container：没指定大小（通过盒子模型约束控制大小），与父级组件的外边距为左10，上0，右20，下30，颜色为红色。
  - Container：没指定大小，与父级组件的上下左右外边距均为10，内边距上下左右均为10，颜色为白色。
  - Text：显示多行文本，用于展示内边距效果。

运行后的界面如下图所示，可以看到和预期一致。

以上就是Flutter 容器盒子模型的使用示例的详细内容，更多关于Flutter 容器的盒子模型的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android Uri和文件路径互相转换的实例代码
在项目中需要用到将Uri转换为绝对路径，下面小编把Android Uri和文件路径互相转换的实例代码分享到脚本之家平台，需要的的朋友参考下吧
2017-07-07
Jetpack Compose Canvas绘制超详细介绍
Canvas 是允许您在屏幕上指定区域并在此区域上执行绘制的组件。您必须使用修饰符指定尺寸，无论是通过Modifier.size修饰符指定确切尺寸，还是通过Modifier.fillMaxSize，ColumnScope.weight等相对于父级指定精确尺寸。如果父级包装了此子级，则仅必须指定确切尺寸
2022-10-10
Android ScrollView无法填充满屏幕的解决办法
这篇文章主要介绍了Android ScrollView无法填充满屏幕的解决办法的相关资料,这里提供实例和解决办法，需要的朋友可以参考下
2017-07-07
Android实现捕获TextView超链接的方法
这篇文章主要介绍了Android实现捕获TextView超链接的方法,涉及Android查找TextView中超链接的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
解决android studio卡顿,提升studio运行速度的方法
这篇文章主要介绍了解决android studio卡顿,提升studio运行速度的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-03-03
Android ListView异步加载图片方法详解
这篇文章主要介绍了Android ListView异步加载图片方法,结合实例形式较为详细的分析了ListView异步加载图片的原理与相关实现技巧,需要的朋友可以参考下
2016-02-02
Android新布局方式ConstraintLayout快速入门教程
谷歌在2016年的IO大会上推出的一种新的布局方式—-ConstraintLayout，这局是一种约束型的布局方式，下面这篇文章主要给大家介绍了Android中新布局方式ConstraintLayout的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-05-05
Android 解决sqlite无法创建新表的问题
这篇文章主要介绍了Android 解决sqlite无法创建新表的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-05-05
如何给Flutter界面切换实现点特效
这篇文章主要给大家介绍了关于如何给Flutter界面切换实现点特效的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
Android从Fragment跳转到其他Activity的简单实例
这篇文章主要介绍了Android从Fragment跳转到其他Activity的简单实例,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02