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

Posted 2023-04-13

【中文标题】如何在jetpack compose中设置抽屉的宽度>

【英文标题】：How set width to drawer in 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())
    

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

【参考方案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))