目录样例代码在讲 Flutter 的盒子模型前,先看看html 中的盒子模型。如下图所示,一个页面元素包括了与父级容器的外边距(margin),自身内容与边框的内边距(padding
在讲 Flutter 的盒子模型前,先看看html 中的盒子模型。如下图所示,一个页面元素包括了与父级容器的外边距(margin),自身内容与边框的内边距(padding)。外边距 和内边距都可以通过 LTRB (左、上、右、下)单独设定四个方向的大小。
Flutter 的盒子模型和 HTML 的是一样的,而通用的容器 Container 就相当于是一个通用的容器,和 HTML 的 div 标签一样。如果要控制一个元素的尺寸,外边距,内边距和边框,最通用的做法是使用 Container 容器将元素包裹。当然 Flutter 也提供了一些更为具体的布局组件方便开发,例如 :
上面这些组件实际都可以通过 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里的组件层级如下:
运行后的界面如下图所示,可以看到和预期一致。
以上就是Flutter 容器盒子模型的使用示例的详细内容,更多关于Flutter 容器的盒子模型的资料请关注编程网其它相关文章!
--结束END--
本文标题: Flutter 容器盒子模型的使用示例
本文链接: https://www.lsjlt.com/news/126330.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0