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. DevOps2023现状报告|注重文化、以用户为中心是成功的关键

    Google Cloud DORA 团队的一份新研究报告强调了企业文化和关注用户作为成功软件交付支柱的重要性. 2023 DevOps 状况报告分析了过去 9 年来通过此类最大规模调查收集的全球 36 ...

  2. Go包介绍与初始化:搞清Go程序的执行次序

    Go包介绍与初始化:搞清Go程序的执行次序 目录 Go包介绍与初始化:搞清Go程序的执行次序 一.main.main 函数:Go 应用的入口函数 1.1 main.main 函数 1.2 main.m ...

  3. PTA乙级1044C++(手动打表hhh)

    1044 火星数字 (20 分) 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, j ...

  4. off-line RL | CQL:魔改 Bellman error 更新,得到 Q 函数 lower-bound

    论文题目: Conservative Q-Learning for Offline Reinforcement Learning CQL 是师兄盛赞的一篇论文:"是 off-line RL ...

  5. 解决Maven中90%的依赖(导包)问题

    今天给大家分享一个非常好用的技巧,这个技巧是一个组合技巧 是的,自从我开始接触了以spring为框架的项目学习后,这个maven导包老是出现问题,每次在这个上面花费好多时间,于是乎打算写一个秘籍出来. ...

  6. BI 数据可视化平台建设(1)—交叉表组件演变实战

    作者:vivo 互联网大数据团队 - Zhu Jianchen 本文是vivo互联网大数据团队<BI数据可视化平台建设>系列文章第1篇 - 交叉表组件. 交叉表在数据分析里应用广泛,通过本 ...

  7. musl中strlen源码实现和分析

    最近在学习<C 和指针>的第 6 章指针部分,在 6.12 章节看到了 strlen 函数的实现,联想到最近有在看 musl 的源码,于是就把 musl 中 strlen 的源码认真地分析 ...

  8. python列表之索引及len()函数

    我们在刚开始使用列表的时候,经常会遇到这种错误 list_1 = ['one', 'two', 'three', 'four', 'five'] print(list_1[5]) 这段代码看上去是没有 ...

  9. Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

    Vue环境的搭建 一.     背景 vue的运行方式有两种 一种是在页面引用vue的js包, 一种是搭建脚手架来vue框架. 我们在这里使用的是第二种方式. 需要安装的软件 npm 16.13.1 ...

  10. 13 HTTP传输大文件的方法

    目录 如何在有限的带宽下高效快捷传输大文件? 数据压缩 分块传输 范围请求 多段数据 如何在有限的带宽下高效快捷传输大文件? 数据压缩 分块传输 范围请求 多段数据 数据压缩 思路:把大文件整体变小 ...