开发者社区> 岛上码农> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Flutter 页面布局盒子模型介绍

简介: Flutter 和盒子模型和网页、安卓都差不多,通过外边距(Margin)、内边距(Padding)和对齐等方式可以实现页面的布局。同时,Flutter 提供了很多布局容器,简化了布局的开发。
+关注继续查看
在网页开发中,有盒子模型,号称统一三端的 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,颜色为红色。
  • Text:显示多行文本,用于展示内边距效果。

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

盒子模型示例

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter(四)之Flutter的布局Widget
为了实现界面内组件的各种排布方式,我们需要进行布局,和其他端不同的是,Flutter中因为万物皆Widget,所以布局也是使用Widget来完成的。 Flutter中的布局组件非常多,有31个用于布局的组件,Flutter布局组件[1]; 在学习的过程中,我们没必要一个个全部掌握,掌握最常用的,一些特殊的组件用到时去查文档即可; Flutter将布局组件分成了 单子布局组件(Single-child layout widgets) 和 多子布局组件(Multi-child layout widgets)
36 0
Flutter入门:如何只关闭自身页面
前几天QA给我提了一个bug,说一个弹窗总是无缘无故的自己退出,而且没有任何规律,无法准确复现。 我经过调查发现,我们有一个倒计时弹窗(在Flutter中弹窗其实也是页面),倒计时结束后关闭。但是在弹出倒计时后,由于一些业务逻辑又弹出另外一个弹窗,这时候如果倒计时结束调用pop,只会将新的弹窗关闭,而倒计时弹窗则无法关闭了。 因为这个弹窗不是必弹的,所以导致好像后一个页面是随机无故退出似的。
115 0
Android Studio开发flutter快捷键
下面是android studio开发flutter快捷键的一些总结,非常实用,掌握后能明显提高编码速度和编码质量: 1、快速创建widget:在dart文件中输入stf或stl出现提示后按回车即可
31 0
Android Studio开发flutter快捷键
Android Studio开发flutter快捷键 下面是android studio开发flutter快捷键的一些总结,非常实用,掌握后能明显提高编码速度和编码质量:
69 0
盘点 Flutter 领域的点点滴滴 【专题合集】
Flutter 实验室 Flutter 是一个跨平台的应用程序开发框架,我们可以使用它为多个平台构建本地编译的应用程序:移动、桌面和 Web。已知支持的输出目标是 Android、iOS、HTML、HTML Canvas、Linux、Windows、macOS 和 Fuchia。本合集从安装到部署,从最基本的 http 包与 dio 包入手,从核心理念一切皆 widget 开始,到个性化定制,最后介绍状态管理的基础。
30 0
比较 Flutter 日期选择器库【Flutter 专题 6】
日期选择器是对 UI 的有用补充,它使您的应用程序用户可以轻松地从日历中选择日期。无论您是在注册表单中添加出生日期字段,还是为用户提供预约时间段,您都可以使用日期选择器库来简化流程。 在本教程中,我们将探索 Flutter 的三个流行日期选择器库 Flutter、Flutter Datetime Picker、Flutter Date Range Picker 和date_time_picker。我们将检查每个库的功能并将每个库安装在一个简单的移动应用程序中。
164 0
Flutter 82: 初识 Flutter Stream (二)
0 基础学习 Flutter,第八十二步:学习基础的 Stream 和 StreamController!
859 0
程序员必下20本电子书:Java手册、Flutter最佳实践、AIoT开发手册... | 1024程序员节技术礼包之二
1024程序员节,开发者社区决定动用洪荒之力为你集齐整整 20本技术电子书 !!一次性打包送给你!
81012 0
+关注
岛上码农
Flutter爱好者,公众号:岛上码农
32
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载