Flutter中Contrainer 组件的宽高限制分析
2023-09-11 14:14:53 时间
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
** | 你可能需要 |
---|---|
CSDN | 网易云课堂教程 |
掘金 | EDU学院教程 |
知乎 | Flutter系列文章 |
头条同步 | 百度同步 |
本文章首发于微信公众号(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 "),
),
),
),
),
);
}
}
相关文章
- Flutter minWidth和maxWidth 限制容器
- flutter常用组件总结
- Flutter笔记 - 布局类组件
- [Flutter] 因为不讲这个重点, 全网 flutter 实战视频沦为二流课程
- [Flutter] lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'.
- 最新 Android Flutter 技术解析与实战,带你深入Flutter内部机制
- Flutter拓展 android studio如何连接夜神模拟器(亲测!!!)
- Futter基础第20篇: 实现轮播图 flutter_swiper
- Flutter进阶第4篇: 实现简单的新闻系统渲染新闻详情数据以及用flutter_html解析html
- Flutter学习 — 创建一个 grid List
- Flutter原理 flutter架构、flutter UI系统、BuildContext、Widget与Element、命中测试hitTest、flutter显示流程分析
- flutter 仿抖音的列表顶部透明度渐变效果
- flutter 把一个列表传进一个界面,对新列表进行操作,实际上是对旧列表进行操作
- flutter Stack超出底图范围后,关闭按键点击效果失效
- flutter 自己写一个组件
- flutter在导航栏处实现对两个列表的点击事件
- flutter Uint8List格式的图片和File格式图片的互相转换
- Flutter EditText编辑框
- Flutter实战之GetX工具类封装-GetUtils
- Flutter之SafeArea
- Flutter之ScrollView简析
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
- Flutter StatefulWidget 有状态组件 、 页面上绑定数据、改变页面数据、 BottomNavigationBar 自定义 底部导航条、以及实现页面切换
- Flutter GridView 组件 以及动态 GridView
- Flutter ListView 基础列表组件、水平 列表组件、动态列表图标组件
- Flutter组件学习之自定义画板绘制圆形——筑梦之路
- Flutter组件学习之ClipOval圆形裁剪——筑梦之路