如何在jetpack compose中设置抽屉的宽度>答案

【问题标题】：How set width to drawer in jetpack compose>如何在jetpack compose中设置抽屉的宽度>
【发布时间】：2022-01-02 12:29:40
【问题描述】：

我可以使用 Scaffold 在 JetpackCompose 中拥有 Navigation Drawer。

但是当我改变 drawbleShape 的大小时，它会将固定宽度设置为默认大小。

Scaffold(
    drawerContent = { DrawableCompose() },
    drawableShape = MaterialTheme.shapes.small
) {}

我参考这篇文章，How to set the Scaffold Drawer Width in JetpackCompose?

但它会像孩子一样写作，

Scaffold(
    drawerContent = { DrawableCompose() },
    drawableShape = customShape()
) {}

@Composable
fun customShape() = object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Rectangle(Rect(left = 0f, top = 0f, right = size.width * 2 / 3, bottom = size.height))
    }

DrawerCompose

@Composable
fun DrawerCompose(
    id: String
) {
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(modifier = Modifier.fillMaxSize()) {
        OutlinedTextField(value = id, onValueChange = { onChangeEmpNo(it) }, modifier = Modifier.fillMaxWidth())
    }
}

如上图，部分部分被剪掉。有没有办法设置宽度抽屉组合宽度？

【问题讨论】：

标签： android-jetpack-compose drawer

【解决方案1】：

您应该可以通过添加 Spacer 来解决它，例如：

Scaffold(
    drawerContent = {
        Row {
            DrawableCompose()
            Spacer(Modifier.fillMaxHeight().width(48.dp))
        }
    },
    drawerShape = customShape()
) {}

如果你想使用 right with，你可以使用这个：

val myShape = customShape()
val widthDp = pxToDp(myShape.leftSpaceWidth!!)
Scaffold(
    drawerContent = {
        Row {
            DrawableCompose()
            Spacer(Modifier.fillMaxHeight().width(widthDp))
        }
    },
    drawerShape = myShape
) {}

对于上述解决方案，您必须添加 pxToDp 函数并调整 customShape 函数：

@Composable
fun pxToDp(px: Float) = with(LocalDensity.current) { px.toDp() }

@Composable
fun customShape() = MyShape()

class MyShape : Shape {
    var leftSpaceWidth: Float? = null
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        leftSpaceWidth = size.width * 1 / 3
        return Outline.Rectangle(Rect(left = 0f, top = 0f, right = size.width * 2 / 3, bottom = size.height))
    }
}

【讨论】：