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. Go语言系列——Go语言介绍

    文章目录 01-Go语言介绍 一 Go语言介绍 二 Go语言特性 三 Go语言发展(版本/特性) 四 Go语言应用 谁在用 Google Facebook 腾讯 百度 京东 小米 360 应用领域 五 ...

  2. matlab关于阶梯图和图窗操作

    1阶梯信号绘制 Matlab 中绘制阶梯图函数:stairs x = [30 33 37 40 37 33 30 27 23 20 23 27 30 30]'; StepNum = length(x) ...

  3. 【最佳实践】MongoDB导出导入数据

    首先说一下这个3节点MongoDB集群各个维度的数据规模: 1.dataSize: 1.9T 2.storageSize: 600G 3.全量备份-加压缩开关:186G,耗时 8h 4.全量备份-不加 ...

  4. 漏洞扫描与安全加固之Apache Axis组件

    一.Apache Axis组件高危漏洞自查及整改 Apache Axis组件存在由配置不当导致的远程代码执行风险. 1. 影响版本 Axis1 和Axis2各版本均受影响 2. 处置建议 1)禁用此服 ...

  5. MyBatis foreach循环批量修改数据时报错

    报错如下 org.springframework.jdbc.BadSqlGrammarException: ### Error updating database. Cause: java.sql.S ...

  6. Windows下VC++编译器32位memcpy、memmove函数汇编代码详解

    整理者:赤勇玄心行天道 QQ号:280604597 微信号:qq280604597 QQ群:511046632 博客:www.cnblogs.com/gaoyaguo  blog.csdn.net/c ...

  7. VRRP相关简述

    VRRP 诞生原因 单网关,出问题时,旗下所有主机无法通信. 多网关,容易产生网关冲突. 而,VRRP能够在不改变组网的情况下,将多台路由器虚拟成一个虚拟路由器,通过配置虚拟路由器的IP地址为默认网关 ...

  8. 🔥🔥TCP协议:三次握手、四次挥手,你真的了解吗?

    什么是TCP网络分层 应⽤层 应用层是网络协议栈中的最顶层,主要负责应用程序之间的通信.其中一种常见的应用层协议是HTTP协议,它定义了应用程序之间如何传递报文. 传输层 传输层是为两台主机之间的应用 ...

  9. 聊一聊 tcp/ip 在.NET故障分析的重要性

    一:背景 1. 讲故事 这段时间分析了几个和网络故障有关的.NET程序之后,真的越来越体会到计算机基础课的重要,比如 计算机网络 课,如果没有对 tcpip协议 的深刻理解,解决这些问题真的很难,因为 ...

  10. 排序:使数组唯一的最小增量 (3.22 leetcode每日打卡)

    给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1. 返回使 A 中的每个值都是唯一的最少操作次数. 示例 1: 输入:[1,2,2]输出:1解释:经过一次 move 操作, ...