喷气背包中不同类型的宽度组成

2024-05-22

我正在 jetpack compose 的文本字段中工作。我想建立这样的东西

TextField(
            value = value,
            onValueChange = {
                value = it
            },
            modifier = Modifier
                .requiredWidth(56.dp)
                .padding(10.dp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = OffWhite,
                focusedIndicatorColor = TealLight,
                cursorColor = TealLight
            )
        )

场景1

当我尝试这个时

 .requiredWidth(56.dp)

or

.width(56.dp)

设计上看起来是这样的

场景2

当我尝试这个时

.widthIn(min = 56.dp)

看起来像这样

场景3

当我尝试这个时

.fillMaxWidth()

它占据了整个屏幕的宽度。

所以我的问题是哪一个用于哪种情况?对于我来说,最好的属性是什么?


在 jetpack Compose 中,可组合项或子可组合项的尺寸是使用约束来设置的,约束是一组尺寸和有界或有限的标志。并且 be Modifier.requiredX 用于强制大小,但如果约束不在父级的限制中,它很容易破坏您的布局。

之间的区别widthIn and requiredWidthIn是第一个遵守的之前的尺寸修饰符或最大父尺寸而后者可以力约束.

/**
 * Create a [Constraints]. [minWidth] and [minHeight] must be positive and
 * [maxWidth] and [maxHeight] must be greater than or equal to [minWidth] and [minHeight],
 * respectively, or [Infinity][Constraints.Infinity].
 */
@Stable
fun Constraints(
    minWidth: Int = 0,
    maxWidth: Int = Constraints.Infinity,
    minHeight: Int = 0,
    maxHeight: Int = Constraints.Infinity
): Constraints {
    require(maxWidth >= minWidth) {
        "maxWidth($maxWidth) must be >= than minWidth($minWidth)"
    }
    require(maxHeight >= minHeight) {
        "maxHeight($maxHeight) must be >= than minHeight($minHeight)"
    }
    require(minWidth >= 0 && minHeight >= 0) {
        "minWidth($minWidth) and minHeight($minHeight) must be >= 0"
    }
    return Constraints.createConstraints(minWidth, maxWidth, minHeight, maxHeight)
}

基于Constraints在测量期间,宽度和高度被分配给可组合项,如下所示Placeables.

在下面的示例中,当 TextField 没有固定大小的父级时,它会增长到最大宽度。如果使用 Modifier.widthIn() 时设置了小于 TextField 的固定大小,则 TextField 设置为父级宽度,而 Modifier.requiredWidthIn() 跳出父级为 (TextField 大小 - 父级大小)/2

@Composable
private fun TextFieldSamples() {

    Column(
        modifier = Modifier
            .padding(20.dp).border(2.dp, Color.Cyan)
    ) {

        var text1 by remember { mutableStateOf("") }

        Column(modifier = Modifier) {
            TextField(
                modifier = Modifier
                    .border(2.dp, Color.Green)
                    .widthIn(56.dp),
                value = text1,
                onValueChange = { text1 = it }
            )

            TextField(
                modifier = Modifier
                    .border(2.dp, Color.Red)
                    .requiredWidthIn(56.dp),
                value = text1, onValueChange = { text1 = it })
        }

        Spacer(modifier = Modifier.height(30.dp))

        var text2 by remember { mutableStateOf("") }

        Column(modifier = Modifier.width(50.dp)) {
            TextField(
                modifier = Modifier
                    .border(2.dp, Color.Green)
                    .widthIn(56.dp),
                value = text2, onValueChange = { text2 = it })

            TextField(
                modifier = Modifier
                    .border(2.dp, Color.Red)
                    .requiredWidthIn(56.dp),
                value = text2, onValueChange = { text2 = it })
        }
    }
}

尺寸调节剂

Modifier.width/height()

返回固定约束或具有相等 minWidth/Height 和 maxWidth/Height 的约束。 所以子可组合项仅限于此约束

Modifier.fillmaxWidth/Height(分数)

覆盖父级最大约束下可用的空间的一部分

Modifier.width/heightIn(min)

将最小宽度/高度保留为此值,以便可以使用此尺寸来测量子可组合项。子项可以低于此值或更大,直到最大宽度/高度

Modifier.width/heightIn(最大)

这是可以测量儿童的最大宽度/高度。子可组合项的测量尺寸不能大于最大宽度/高度。

@Composable
private fun ConstraintsSample1() {
    Text(text = "Fixed Size")
    BoxWithConstraints(modifier = Modifier
        .size(100.dp)
        .border(3.dp, Color.Green)) {
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red))
    }

    Spacer(modifier=Modifier.height(10.dp))
    BoxWithConstraints(modifier = Modifier
        .size(100.dp)
        .border(3.dp, Color.Green)) {
        Box(modifier = Modifier
            .size(150.dp)
            .background(Color.Red))
    }

    Text(text = "widthIn(min)")

    BoxWithConstraints(modifier = Modifier
        .widthIn(min = 100.dp)
        .border(3.dp, Color.Green)) {
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red))
    }

    Spacer(modifier=Modifier.height(10.dp))
    BoxWithConstraints(modifier = Modifier
        .widthIn(min = 100.dp)
        .border(3.dp, Color.Green)) {
        Box(modifier = Modifier
            .size(150.dp)
            .background(Color.Red))
    }


    Text(text = "widthIn(max)")

    BoxWithConstraints(modifier = Modifier
        .widthIn(max = 100.dp)
        .border(3.dp, Color.Green)) {
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red))
    }

    Spacer(modifier=Modifier.height(10.dp))
    BoxWithConstraints(modifier = Modifier
        .widthIn(max = 100.dp)
        .border(3.dp, Color.Green)) {
        Box(modifier = Modifier
            .size(150.dp)
            .background(Color.Red))
    }
}

Modifier.requiredWidth/Height()

Constrain the width/height of the content to be between `minDp` and `maxDp`. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

例如当你设置Modifier.size(50.dp).size(100.dp)但是,如果您用户需要,则应用第一个尺寸修饰符

Modifier.size(50.dp).requiredSizeIn(100.dp) 

100.dp 是强制的,但布局放置为两个维度之间差异的一半

@Composable
private fun ConstraintsSample2() {

    Column(modifier = Modifier
        .fillMaxSize()
        .padding(30.dp)
        .border(4.dp, Color.Cyan)) {

        Text(text = "Chaining size modifiers")

        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Yellow))

        Box(modifier = Modifier
            .size(50.dp)
            .size(100.dp)
            .background(Color.Red))

        Box(modifier = Modifier
            .size(50.dp)
            .requiredSizeIn(100.dp)
            .background(Color.Green))


        Text(text = "widthIn(max)")

        BoxWithConstraints(
            modifier = Modifier
                .width(100.dp)
                .border(3.dp, Color.Green)
        ) {
            Box(
                modifier = Modifier
                    .requiredWidthIn(min = 20.dp, max = 50.dp)
                    .height(50.dp)
                    .background(Color.Red)
            )
        }

        Spacer(modifier = Modifier.height(10.dp))
        BoxWithConstraints(
            modifier = Modifier
                .width(100.dp)
                .border(3.dp, Color.Green)
        ) {
            Box(
                modifier = Modifier
                    .requiredWidthIn(min = 150.dp, max = 200.dp)
                    .height(50.dp)
                    .background(Color.Red)
            )
        }
    }
}

约束条件

约束根据尺寸修改器、垂直/水平滚动或父级选择限制或想要使用最小或最大尺寸的方式而变化。

我的设备上的最大设备宽度为 1080px,在下面的示例中 200.dp 为 525px。并使用了verticalScroll,这就是为什么高度是用Constraints.Infinity

@Composable
fun ConstraintsSample3() {
    Column(modifier = Modifier) {

        Text(text = "No Dimension Modifier")

        BoxWithConstraints(modifier = Modifier.background(Brown400)) {
            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(10.dp))
        Text(text = "FillMaxWidth and 200.dp Height")
        BoxWithConstraints(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Red400)
        ) {
            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(10.dp))
        Text(text = "wrapContentSize()")
        BoxWithConstraints(
            modifier = Modifier
                .wrapContentSize()
                .background(Orange400)
        ) {

            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth\n" +
                        "hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight\n" +
                        "maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight\n" +
                        "hasFixedHeight: $hasFixedHeight",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(10.dp))
        Text(text = "200.dp Width and Height")
        BoxWithConstraints(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Green400)
        ) {

            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
                color = Color.White
            )
        }
    }
}
@Composable
private fun BoxWithConstraintsSample4() {
    Text(text = "200.dp WidthIn(min) and HeightIn(min)")
    BoxWithConstraints(
        modifier = Modifier
            .widthIn(min = 200.dp)
            .heightIn(200.dp)
            .background(Blue400)
    ) {

        val hasBoundedWidth = constraints.hasBoundedWidth
        val hasFixedWidth = constraints.hasFixedWidth
        val minWidth = constraints.minWidth
        val maxWidth = constraints.maxWidth

        val hasBoundedHeight = constraints.hasBoundedHeight
        val hasFixedHeight = constraints.hasFixedHeight
        val minHeight = constraints.minHeight
        val maxHeight = constraints.maxHeight
        Text(
            "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                    "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                    "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                    "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
            color = Color.White
        )
    }

    Text(text = "200.dp requiredWidth(min) and requiredHeight(min)")
    BoxWithConstraints(
        modifier = Modifier
            .requiredWidthIn(min = 200.dp)
            .requiredHeightIn(200.dp)
            .background(Pink400)
    ) {

        val hasBoundedWidth = constraints.hasBoundedWidth
        val hasFixedWidth = constraints.hasFixedWidth
        val minWidth = constraints.minWidth
        val maxWidth = constraints.maxWidth

        val hasBoundedHeight = constraints.hasBoundedHeight
        val hasFixedHeight = constraints.hasFixedHeight
        val minHeight = constraints.minHeight
        val maxHeight = constraints.maxHeight
        Text(
            "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                    "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                    "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                    "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
            color = Color.White
        )
    }

    Text(text = "200.dp defaultMinSize()")
    BoxWithConstraints(
        modifier = Modifier
            .defaultMinSize(200.dp)
            .background(Pink400)
    ) {

        val hasBoundedWidth = constraints.hasBoundedWidth
        val hasFixedWidth = constraints.hasFixedWidth
        val minWidth = constraints.minWidth
        val maxWidth = constraints.maxWidth

        val hasBoundedHeight = constraints.hasBoundedHeight
        val hasFixedHeight = constraints.hasFixedHeight
        val minHeight = constraints.minHeight
        val maxHeight = constraints.maxHeight
        Text(
            "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                    "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                    "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                    "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
            color = Color.White
        )
    }

    Text(text = "200.dp WidthIn(max)")
    BoxWithConstraints(
        modifier = Modifier
            .widthIn(max = 200.dp)
            .background(Purple400)
    ) {

        val hasBoundedWidth = constraints.hasBoundedWidth
        val hasFixedWidth = constraints.hasFixedWidth
        val minWidth = constraints.minWidth
        val maxWidth = constraints.maxWidth

        val hasBoundedHeight = constraints.hasBoundedHeight
        val hasFixedHeight = constraints.hasFixedHeight
        val minHeight = constraints.minHeight
        val maxHeight = constraints.maxHeight
        Text(
            "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                    "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                    "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                    "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight",
            color = Color.White
        )
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

喷气背包中不同类型的宽度组成 的相关文章

  • 将 APK 移动到 /system/priv-app/ 时出现 java.lang.UnsatisfiedLinkError

    成功调试我的应用程序后 我想将应用程序移动到系统应用程序 以便我可以使用系统权限 例如 REBOOT 和 SET TIME 但是 当将我的 APK 移动到 system priv app 文件夹或将 APK 添加到 ROM 编译中的第三方系
  • 我应该使用什么事件在 Firebase Analytics 上发送“按钮按下”事件

    我发现最合适的是选择内容 https firebase google com docs reference android com google firebase analytics FirebaseAnalytics Event html
  • 如何使用 ArrayAdapter

    ArrayList
  • Android - 如何获取文本视图中字符的坐标

    是否可以从 Android 中的 TextView 中的字符获取 x 坐标 我不是在寻找 TextView 本身的坐标 我需要 TextView 中最后一个字符的坐标 多行 提前致谢 Java解决方案 以下是如何获得x and y特定字符的
  • 为什么 Cursor.requery() 被标记为“已弃用”?

    Cursor requery 是一种非常常见的方法 使用它来刷新 ListView 的内容 但为什么这个方法被标记为 已弃用 呢 我不太清楚 API 文档上的原因 Cursor requery API http developer andr
  • XmlPullParser 异常 - 无法解决

    我有一个基本方法 ReadXML 从资产文件夹中读取 xml 文件 运行时不会引发任何异常 但在这个方法中 我调用了 doXML 方法 该方法尝试从 xml 文件中提取文本并将该文本设置到文本视图中 当 doXML 方法运行时 我不断收到以
  • Android - 如何在 ListView 的背景上显示垂直线(并根据行高)?

    如何在背景上显示一条垂直线 如下图蓝色突出显示的那条 在此示例中 我有一个带有 ImageView 元素的 ListView 和 TextView 但它与线条无关 并且我希望这些项目的背景上有一条垂直线 让人感觉它们与每个项目 连接 另请注
  • 如何在 Android 应用程序中使用 xmlserializer 创建 xml

    您好 我正在制作一个预订应用程序 我需要在创建 xml 后将 xml 发送到服务器 如何使用创建 xmlxmlserializer创建后将其发送到服务器 http api ean com ean services rs hotel v3 l
  • 像 Google Play 商店一样在垂直 RecyclerView 中动态不同图像水平 RecyclerView

    我一直在关注这个教程 http android pratap blogspot co za 2015 12 horizo ntal recyclerview in vertical html http android pratap blog
  • 为什么 Android Eclipse 不断刷新外部文件夹并花费很长时间?

    我只有一部新的 Android 手机 我一直在修补一些基本的应用程序 每当我保存任何内容时 Eclipse 的 Android 插件就会刷新外部文件夹 这让我抓狂 通常我不会介意 但当需要 10 秒才能刷新时 我开始注意到 我已经搜索过 其
  • ViewPagerIndicator:TabPagerIndicator 不可见

    我现在正在为 viewpageinderdicator 苦苦挣扎 当我使用 TitlePageIndicator 时 一切正常 但是当我尝试使用 TabPageIndicator 时我看不到它 它不会出现在层次结构视图中 我尝试了很多东西
  • Gradle 构建无法解析生成的类

    我刚刚将 Android Studio 从 1 5 更新到 2 2 1 Gradle 也是如此 我有一个项目 它使用注释处理器框架 由我制作 来执行类似 Dagger 的依赖注入 这在更新之前工作得很好 但现在 Gradle 无法解析生成的
  • Android:TelephonyManager 类

    我不明白为什么 API 文档中这么写TelephonyManager类是public 但是当我尝试创建一个实例时 它说它不是公共类 并且无法从包中访问 我看到它也说使用Context getSystemService Context TEL
  • 如何在java中从包含.0的浮点数中删除小数部分

    我只想删除包含的浮点数的小数部分 0 所有其他数字都是可以接受的 例如 I P 1 0 2 2 88 0 3 56666 4 1 45 00 99 560 O P 1 2 2 88 3 567 4 1 45 99 560 有什么方法可以做到
  • 如何创建用于测试的对象的 PagedList?

    我一直在使用 Google 的 arch 库 但是让测试变得困难的一件事是使用PagedList 对于此示例 我使用存储库模式并从 API 或网络返回详细信息 因此 在 ViewModel 中 我调用此接口方法 override fun g
  • 安卓浮动键盘

    是否可以通过编程方式更改键盘的位置 我正在开发一个图腾应用程序 如果键盘停靠在底部 则很难使用 我尝试创建一个扩展 InputMethodService 的自定义键盘 并且我能够更改按键的布局 但我无法更改键盘的视图位置 快捷键 https
  • 找不到R类

    当我打开 Eclipse 时 R class在我的项目中消失了 为什么 我有 eclipse juno 和最新版本的 android SDK The R class不会重新生成 因为代码中有错误 我怎么解决这个问题 Try Project
  • Android - 从渲染线程内结束活动

    下午好 我不熟悉 android 中的活动生命周期 并且一直在尽可能地阅读 但我不知道如何以良好的方式解决以下问题 我有一个使用 GLSurfaceView 的活动来在屏幕上绘制各种内容 在这个 GLSurfaceView 的渲染线程中 我
  • android 填充包含片段的布局

    问题是什么 我如何膨胀包含片段的布局 我不知道错误消息的含义 请帮我 谢谢 错误信息 09 01 18 44 58 698 E AndroidRuntime 20617 Caused by java lang IllegalArgument
  • removeall 和removeif 的用例

    我找到了这个 fun main val list MutableList

随机推荐