flutter版match-parent

在Flutter开发中,如何让子View的高度根据父ViewGroup动态变化?作者通过探索,发现在安卓中常用的match-parent特性在Flutter中可以使用IntrinsicHeight来实现。文中详细介绍了如何利用IntrinsicHeight解决一个特定布局问题,即垂直分隔线根据右侧文字高度自适应。尽管IntrinsicHeight可能会带来性能开销,但在必要时可以有效解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在安卓开发中我们都知道,在需要子view充满父viewgroup的时候可以使用match-parent,就可以实现子view的高度随着父viewgroup的高度而变化,但是在flutter中应该怎么办呢?

这几天,在研究verticalDivider的时候终于被我找到了,虽然应用场景不多,但是终于是解决了一大难题

一般的,在flutter中,比如在Row中,我们希望左边是一个icon,然后右边是一个对应的文字介绍,我们可以使用Row,然后文字使用Expanded即可,就像这样:

但是遇到下面这种需求的时候呢?

例如这种,中间一根线是需要根据右边的文字高度来进行自动增高的,换句话说,也就是右边文字确定父容器Row的高度,然后中间的线要充满整个父容器。这个时候如果再用expanded的话。。就会发现报错了

那么在安卓中是怎么处理的呢?

大概思路是父容器由文字控制,然后确定中间圆圈的(收)的位置,在圆圈的上下各增加一个子控件来作为显示,

如果使用constraintlayout的话,就是上面一条线的上面顶到父view的top,下面顶到圆圈的上部,

下面一条线的上面顶到圆圈的下部,下面顶到父view的bottom

那么在flutter中,根据这个思路,终于找到了一个控件:IntrinsicHeight!来看官方的注释:

根据自己的尺寸来限制它的子view的高度,正合我意!但是下面它也说明了,能不用的话尽量不用,relatively expensive,说得很明白了,代价相当昂贵!所以整个应用中我只用了一个地方

有了这个利器,剩下的就好做多了,先用这个包裹一下整个view,然后使用类似安卓的weight属性,进行verticalDivider的高度限制即可。

至此,完结!
————————————————
版权声明:本文为CSDN博主「Genius_sasuke」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Genius_sasuke/article/details/105512201

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值