android - Jetpack Compose 找到父母的宽度/长度
问题描述
我想明确地检索 fillMaxSize() 的值。假设我有:
Box(Modifier
.fillMaxSize()
.background(Color.Yellow))
{
var size = ?
Box(Modifier
.size(someSize)
.background(Color.Blue))
{Text("Test")}
我想多次更改第二个 Box 的大小(可能来自某些视图模型),然后将其重置为 maxSize。
我该怎么做,我不知道任何“getMaxSize()”方法?
解决方案
如果确实需要原始大小值,可以使用以下代码:
var size by remember { mutableStateOf(IntSize.Zero) }
Box(Modifier
.fillMaxSize()
.background(Color.Yellow)
.onSizeChanged {
size = it
}
) {
Box(
Modifier
.then(
with(LocalDensity.current) {
Modifier.size(
width = size.width.toDp(),
height = size.height.toDp(),
)
}
)
.background(Color.Blue)
) { Text("Test") }
}
但请注意,这在性能方面并不是最优的:这个视图被渲染了两次。第一次第二个盒子的大小为零,然后onSizeChanged
调用块,然后第二次渲染视图。
remember
如果在顶级视图中使用,请特别小心,因为更改状态会触发完整视图堆栈重新渲染。通常您希望将屏幕拆分为具有状态的视图,因此仅更改一个视图状态会重新呈现该视图。
你也可以使用你可以在里面BoxWithConstraints
获取maxWidth
/的地方:它的代码少得多,性能也好一点。maxHeight
BoxWithConstraintsScope
BoxWithConstraints(
Modifier
.fillMaxSize()
.background(Color.Yellow)
) {
Box(
Modifier
.size(
width = maxWidth,
height = maxHeight,
)
.background(Color.Blue)
) { Text("Test") }
}
但通常如果您想指示大小依赖关系,使用不直接知道大小的修饰符就足够了。它是一种更“组合”的代码编写方式和更优化的方式。
所以如果你想让你的第二个盒子和第一个一样大小,也可以使用.fillMaxSize()
它。如果你想让它成为父母的一部分,你可以添加分数参数。要使第二个盒子大小为第一个盒子大小的一半,您可以:
Box(
Modifier
.fillMaxSize(fraction = 0.5f)
) { Text("Test") }
如果你想要不同的宽度/高度部分:
Box(
Modifier
.fillMaxWidth(fraction = 0.3f)
.fillMaxHeight(fraction = 0.7f)
) { Text("Test") }
推荐阅读
- ef-core-2.0 - EF CORE 3.0 不能在单个查询执行中使用多个 DbContext 实例
- html - 如何在 html 模板中访问字典中的数据值
- python - 使用python在mysql上创建表,访问被拒绝
- python - 如何在python中的“if”命令列表之后添加“else”选项
- python - 聚合分类列的问题
- javascript - 如何制作搜索按钮以过滤画廊图像
姓名
- go - 在 Go/http/transport 中,如何使用 DialTLS 设置代理?
- r - BTYDplus:预定的核心1、2、8没有交付结果,所有作业的值都会受到影响
- ios - 在 MVVM 架构模式中哪个是调用 API 的正确位置?
- graphql - 如何在中继服务器中使用删除突变?