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. Oracle11g安装教程(带安装包)

    找了半天没在官网上找到Oracle11g的安装包下载,又找了半天,终于在网上的一个教程里找到安装包的网盘链接.现在在这记一下防止以后重新找麻烦. 网盘链接 百度云盘链接:[https://pan.ba ...

  2. 如何在linux(Ubuntu)下安装unity(Unity engine游戏引擎)

    如果直接从unity官网下载unityhub的deb包,直接安装有可能出现unityhub打不开/打开缓慢/无法登陆/无法申请密钥等问题. 正解:从Unity官方源下载unity 1.先添加unity ...

  3. 谱图论:Laplacian算子及其谱性质

    1 Laplacian 算子 给定无向图\(G=(V, E)\),我们在上一篇博客<谱图论:Laplacian二次型和Markov转移算子>中介绍了其对应的Laplacian二次型: \[ ...

  4. VLAN虚拟网络

    VLAN 名称:vlan 虚拟局域网(virtual LAN) 用途 由于交换机所有的端口都在同一广播域,只要发送广播会产生大量的垃圾信息,同时会有病毒的安全隐患(病毒). 为了解决上述问题 1.物理 ...

  5. 【scipy 基础】--插值

    插值运算是一种数据处理方法,主要用来填补数据之间的空白或缺失值.因为在实际应用中,数据往往不是完整的,而是存在着空白或缺失值,这些空白或缺失值可能是由于数据采集困难.数据丢失或数据处理错误等原因造成的 ...

  6. webpack配置局域网访问项目

    要配置webpack允许局域网访问项目,你需要做以下几个步骤:   1. 在webpack配置文件中,找到devServer选项,并设置其属性`host`为`0.0.0.0`.这将允许其他设备通过局域 ...

  7. JavaScript高级程序设计笔记04 变量、作用域与内存

    变量.作用域与内存 变量 特定时间点一个特定值的名称. 分类 原始值:按值访问 复制:两个独立使用.互不干扰 引用值(由多个值构成的对象):按引用访问 操作对象时,实际上操作的是对该对象的引用(ref ...

  8. 阿里云oss视频上传及预览图汇总

    阿里云OSS视频上传的几种方式 1.Web端直传实践简介 https://help.aliyun.com/document_detail/31923.html?spm=a2c4g.11186623.6 ...

  9. VBA常用的函数

    space(8)加空格 vbcrlf换行 trim()去掉两侧空格 lrim()去掉左侧空格 rtrim()去掉右侧空格 left()取字符的左侧 right()取字符串的右侧开始 mid()取字符串 ...

  10. 配置tabBar导航菜单与open跳转差异

    "tabBar": {        "color": "#333",        "selectedColor": ...