Jetpack Compose Row大字号下子元素消失问题求解

当前代码存在两个核心错误，直接导致布局不符合预期：

1. 权重配置位置完全错误：weight(1f)是Row作用域下提供的Modifier扩展方法，必须通过modifier传给子组件才能生效。你现在把weight = 1f作为自定义组件的入参传递，Row根本识别不到这个配置，三个组件完全按照自身内容宽度渲染，配合Arrangement.SpaceBetween就会把剩余空白全部分配到组件间隙，出现大量空白区域。
2. 缺少基础约束配置：你没有给Row设置fillMaxWidth()让其占满父布局横向可用空间，同时大字体场景下没有给内容做溢出约束，内容超出自身宽度时就会挤压其他组件的显示空间。

首先遵守Compose自定义组件的通用规范：所有自定义组件必须暴露modifier入参，并且将传入的modifier应用到组件的根布局上。之后按如下代码修改即可：

Row(
    modifier = Modifier.fillMaxWidth(), // 让Row占满横向可用宽度
    horizontalArrangement = Arrangement.spacedBy(8.dp) // 组件间设置固定间距，避免额外空白
) {
    // 权重通过Modifier传递，三个组件均分Row宽度
    Component1(modifier = Modifier.weight(1f).wrapContentWidth())
    Component2(modifier = Modifier.weight(1f).wrapContentWidth())
    Component3(modifier = Modifier.weight(1f).wrapContentWidth())
}

如果需要兼容系统超大字体，避免内容溢出挤压其他组件，可以在自定义组件内部的Text上增加溢出配置：

Text(
    text = "展示内容",
    maxLines = 1,
    overflow = TextOverflow.Ellipsis, // 超出分配宽度时显示省略号
    modifier = Modifier.fillMaxWidth()
)

注意：已经给子组件设置等权重的场景下，不要再用Arrangement.SpaceBetween，该排列方式会在子组件间隙插入剩余空白，反而会出现布局错位，用固定间距的spacedBy即可。

内容的提问来源于stack exchange，提问作者Ryan Chen