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. 聊聊JDK19特性之虚拟线程

    1.前言 在读<深入理解JVM虚拟机>这本书前两章的时候整理了JDK从1.0到最新版本发展史,其中记录了JDK这么多年来演进过程中的一些趣闻及引人注目的一些特性,在调研JDK19新增特性的 ...

  2. 重写equals方法的注意事项

    重写equals方法的注意事项   一. 在重写equals方法时,要注意满足离散数学上的特性1   自反性:对任意引用值X,x.equals(x)的返回值一定为true.2   对称性:对于任何引用 ...

  3. Oracle 11g数据库详解(2017-01-23更新)

    Oracle 11g数据库详解 整理者:赤勇玄心行天道 QQ:280604597 Email:280604597@qq.com 大家有什么不明白的地方,或者想要详细了解的地方可以联系我,我会认真回复的 ...

  4. 用Python实现将txt中的中文和中文标点保留下来

    用正则表达式就可以实现这个操作. 中文标点的正则表达式: [\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u30 ...

  5. 把工单历史表中的数据,按照工单进行分类,每一批工单的数据放在同一个 key 中

    /** * 把工单历史表中的数据,按照工单进行分类,每一批工单的数据放在同一个key中 * 将对象列表按名称分类成 Map(分类名必与对象的某 get 方法的后的名一致<如:get(name) ...

  6. 用iptables做负载均衡实现高并发

    根据以往经验,在高配置服务器上部署Java服务,建议部署多个JVM实例,以提升JVM示例内存回收效率: 此时面临负载分发问题,常规想法是通过Nginx或者Apache做负载分流.然而在高并发情况下无论 ...

  7. [Python急救站课程]猜拳游戏

    猜拳游戏 import random # 调用random函数库 while True: x = random.randint(0, 2) # 调用库里的randint函数使用随机数. print(& ...

  8. [Python急救站课程]斐波那契数列的计算吧

    斐波那契数列的计算 a, b = 0, 1 while a < 1000: # 输出不大于1000 的序列.while表示循环 print(a, end=',') a, b = b, a + b

  9. 多维详述MediaBox互动直播AUI Kit低代码开发方案

    本专栏将分享阿里云视频云MediaBox系列技术文章,深度剖析音视频开发利器的技术架构.技术性能.开发能效和最佳实践,一起开启音视频的开发之旅.本文为MediaBox最佳实践篇,重点从互动直播AUI ...

  10. Net 高级调试之八:代码审查及杂项命令

    一.简介 今天是<Net 高级调试>的第八篇文章.这篇文章设计的内容挺多的,比如:如何查看方法的汇编代码,如何获取方法的描述符,对象同步块的转储,对象方法表的转储,托管堆和垃圾回收器信息的 ...