Как установить ширину ящика лесов в JetpackCompose?

Question

У нас может быть панель навигации в JetpackCompose, используя Scaffold как показано ниже

      Scaffold(
    drawerContent = { Text(text ="Drawer") }
) {}

Я хочу уменьшить ширину ящика. Как я могу это сделать?

Answer 1

Вы можете изменить форму (включая ширину и высоту), используя drawerShapeпараметр в методе Scaffold Так, например

       Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    drawerShape = customShape(),
    content = {inner padding -> /* Body*/}
)

Затем ваша функция customShape

      fun customShape() =  object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
        ): Outline {
            return Outline.Rectangle(Rect(0f,0f,100f /* width */, 131f /* height */))
     }
 }

Вы также можете использовать чтобы Outline.Rounded,скруглить углы.

Answer 2

Вот пример рисованияScaffoldнестандартная форма.

1. Укажите точный размер.

      Scaffold(
    drawerShape = NavShape(400.dp, 0f)
)

2. Размер спецификации в процентах (половина экрана).

      Scaffold(
    drawerShape = NavShape(0.dp, 0.5f)
)

Пользовательский класс формы

      class NavShape(
    private val widthOffset: Dp,
    private val scale: Float
) : Shape {

    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Rectangle(
            Rect(
                Offset.Zero,
                Offset(
                    size.width * scale + with(density) { widthOffset.toPx() },
                    size.height
                )
            )
        )
    }
}

Answer 3

Я добился этого:

#1 - Установка для модификатора содержимого ящика максимальной ширины:

      @Composable
fun MyDrawerContent(){
     Column(Modifier.fillMaxHeight().width(300.dp)) {
          ...
        

# 2 - Установка цвета ящика эшафота на прозрачный + без высоты

      Scaffold(
     drawerBackgroundColor = Color.Transparent,
     drawerContentColor = Color.Transparent,
     drawerElevation = 0.dp,
     drawerContent = {
          MyDrawerContent()
     },
     ...

Примечание. Единственная проблема, с которой я столкнулся, заключается в том, что если вы коснетесь прозрачной области, ящик не закроется, как раньше. Тем не менее, сайдинг для закрытия работает отлично. Это обходной путь...

Answer 4

Вы пробовали добавить модификатор в свой составной ящик?

Что-то вроде этого:

      Scaffold(drawerContent = { 
        Box(modifier = Modifier.fillMaxWidth(0.9f){
            Text(text = "Drawer") 
        }
    }) {}

Answer 5

      Scaffold(
      topBar = {
          topBar()
      },
      scaffoldState = scaffoldState,
      drawerContent = {
          drawer()
      },
      drawerGesturesEnabled = true
  ) { innerPadding ->
      NavigationHost(navController = navController)
  }
}