Flutter中Contrainer 组件的宽高限制分析
时间:2022-07-24
本文章向大家介绍Flutter中Contrainer 组件的宽高限制分析,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
本文章首发于微信公众号(biglead) 我的大前端生涯 ,同步刊登各技术论坛。
1 Contrainer 组件
在 flutter 应用程序开发中,Contrainer组件可以理解为容器,常用用来设置背景、设置一个 Widget 的内外边距、以及边框样式等等。
2 Contrainer 组件的基本使用以及大小限定分析
Contrainer 组件的大小限定可以描述为:
- 当 Contrainer 组件的父布局设置了大小,那么 Contrainer 将使用父布局的大小设置,
- 如果 父布局没有设置大小 ,自身设置了大小,那么 Contrainer 将使用自身设置的大小,
- 如果 自身没有设置大小,那么 Contrainer 将包裹子 Widget 或者说是将使用子Widget 的大小设置
在这里 黄色的 Contrainer 与 灰色的 Contrainer 的大小完全一至,而灰色的 Contrainer 的大小是由父黄色的Contrainer设置的大小(200,200)决定的, 自身设置的(100,100),并没有起到影响, 子Widged SizedBox 设置的大小(50,50)也没有影响 父组件 灰色的 Contrainer 的大小。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ContainerHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ContainerHomePageState();
}
}
class ContainerHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("Container 配制"),
),
body: Center(
///内三组件
child: Container(
///Container 默认包裹子widget (没任何内外大小的限制 )
///Container的背景颜色
width: 200,
height: 200,
///黄色
color: Colors.yellow,
///当Container 的外层有大小限制进 Container取用的是外层设置的大小
///内二组件
child: Container(
///灰色
color: Colors.grey,
width: 100,
height: 100,
///内一组件
child: SizedBox(
width: 50,
height: 50,
child: Text("这里是body "),
),
),
),
),
);
}
}
Container 的大小由子 自身设置 的情况分析
在这里 黄色的 Contrainer 与 灰色的 Contrainer 的大小完全一至,而灰色的 Contrainer 的大小是由自身设置的大小(100,100)决定的, 子Widged SizedBox 设置的大小(50,50)将没有影响 父组件 灰色的 Contrainer 的大小。
class ContainerHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("Container 配制"),
),
body: Center(
///内三组件
child: Container(
///Container 默认包裹子widget (没任何内外大小的限制 )
///Container的背景颜色
// width: 200,
// height: 200,
color: Colors.yellow,
///当Container 的外层有大小限制进 Container取用的是外层设置的大小
///内二组件
child: Container(
color: Colors.grey,
width: 100,
height: 100,
///内一组件
child: SizedBox(
width: 50,
height: 50,
child: Text("这里是body "),
),
),
),
),
);
}
}
Container 的大小由子 Widget 决定 的情况分析
如图所示
黄色的 Contrainer 与 灰色的 Contrainer 的大小完全一至,而灰色的 Contrainer 的大小是由子Widged SizedBox 设置的大小(50,50)决定的
class ContainerHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("Container 配制"),
),
body: Center(
///内三组件
child: Container(
///Container 默认包裹子widget (没任何内外大小的限制 )
///Container的背景颜色
// width: 200,
// height: 200,
color: Colors.yellow,
///当Container 的外层有大小限制进 Container取用的是外层设置的大小
///内二组件
child: Container(
color: Colors.grey,
// width: 100,
// height: 100,
///内一组件
child: SizedBox(
width: 50,
height: 50,
child: Text("这里是body "),
),
),
),
),
);
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- spark shell 配置 Kryo 序列化
- Mac里捣腾Kerberos(一)
- Spark on K8S 访问 Kerberized HDFS
- Apache Beam的Docker Demo
- docker login 报错了...
- Spark-Submit 和 K8S Operation For Spark
- Spark的Dockerfile分析
- Spark on Kubernetes在Mac的Demo
- Python的Wand模块
- 机器学习第4天:预测1立方米混凝土抗压强度
- 硬件笔记之GP106-90 3GB GTX1060 3GB魔改
- Java BigDecimal 的舍入模式(RoundingMode)详解
- 实际工程中加快 Java 代码编写的小提示
- CentOS7 离线安装软件并准备依赖包
- CentOS7 SkyWalking APM8.1.0 搭建与项目集成使用