LayoutBuilder 是 Flutter 中的一个构建组件,用于根据父容器的约束对其子组件进行布局。

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'LayoutBuilder Example',
home: Scaffold(
appBar: AppBar(
title: Text('LayoutBuilder Example'),
),
body: Center(
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// 计算子组件的宽度和高度
double width = constraints.maxWidth / 2;
double height = constraints.maxHeight / 2; return Container(
width: width,
height: height,
color: Colors.red,
child: Center(
child: Text('Sub Widget'),
),
);
},
),
),
),
),
);
}
}

我们使用 LayoutBuilder 组件来根据父容器的约束动态计算子组件的大小。我们将子组件的宽度和高度都设置为父容器宽度的一半,这样子组件会占据父容器的一四分之一的空间,并且背景色为红色。

LayoutBuilder(获取父类的宽高)的更多相关文章

  1. 在渲染前获取 View 的宽高

    在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...

  2. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  3. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  4. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

  5. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  6. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  7. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  8. 用addOnGlobalLayoutListener获取View的宽高

    首先,我们在onCreate方法里调用getHeight()和 getWidth()是不能正确获取View的宽高的,因为onCreate方法执行完了,我们定义的控件才会被onMeasure()度量,所 ...

  9. 监听视图树 ViewTreeObserver 获取View的宽高

    前奏:在哪里可以获取到View的宽高 我们知道,在onCreate方法执行完毕以后,View才开始被测量,所以我们在onCreate方法里面通过view.getWidth()或view.getMeas ...

  10. 根据图片url地址获取图片的宽高

    /** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...

随机推荐

  1. answer answerdev/answer:latest 开源问答平台

    freedidi.com/10294.html   https://youtu.be/A2GUgvPlTBE?si=jdhqXL1WttLrLgiQ     docker依赖 yum install ...

  2. 《数据结构》王卓老师 p48-p62学习反馈

    跟着青岛大学-王卓老师的视频进行到链队列时,运行链队列代码的时候遇到了两个问题: 1.)Program received signal SIGSEGV Segmentation fault 附代码: ...

  3. 使用gitbook快速搭建文档中心

    背景 在研发一个系统,主要给公司内部同事用,按理说,简单点的话,搞个使用文档就行了,但产品经理希望是做成一个文档中心,比如,你学习个新技术的时候,比如vue,一般有个在线的帮助文档,他的想法就是这种. ...

  4. SpringBoot自动配置原理解析

    1: 什么是SpringBoot自动配置 首先介绍一下什么是SpringBoot,SpringBoost是基于Spring框架开发出来的功能更强大的Java程序开发框架,其最主要的特点是:能使程序开发 ...

  5. Android-Java-反序列化JSON

    import com.google.gson.Gson; import com.google.gson.reflect.TypeToken; String jsonStr= WebAPIOperato ...

  6. 阿里云创建BUCKET脚本

    创建BUCKET脚本 安装模块 pip install pymysql pip install aliyun-python-sdk-core pip install aliyun-python-sdk ...

  7. 22. 从零用Rust编写正反向代理,一个数据包的神奇HTTP历险记!

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,内网穿透,后续将实现websocket代理等,会将实现 ...

  8. Python 利用pandas和matplotlib绘制柱状折线图

    创建数据可视化图表:柱状图与折线图结合 在数据分析和展示中,经常需要将数据可视化呈现,以便更直观地理解数据背后的趋势和关联关系.本篇文章将介绍如何使用 Python 中的 Pandas 和 Matpl ...

  9. 2023 11月 AtCoder 做题记录

    AGC037F 题目传送门 第一步,考虑判断序列是否合法. 通过对于属于等级 $k$ 的定义将定义反推:$s$ 中最小的元素 $x$,找到所有 $x$ 的连续段.设一个连续段的长度是 $len$,若 ...

  10. 1. 手动移植FreeRTOS V9.00到 Stm32F103C8T6

    记录移植过程,以便以后查看: 附上FreeRTOS源码和  测试文件: 链接:https://pan.baidu.com/s/1v6nvDOk4-2NILYqN3njGjQ 提取码:1234 1.使用 ...