如何防止喷气背包组合脚手架在对话框中显示时占据屏幕的整个高度

Posted 2023-02-23

【中文标题】如何防止喷气背包组合脚手架在对话框中显示时占据屏幕的整个高度

【英文标题】：How to prevent a jetpack compose scaffold from taking the whole height of the screen when it is shown in a dialog

【发布时间】：2022-01-14 05:05:37

【问题描述】：

我有一个 android 活动，它在平板电脑上以 Base.Theme.AppCompat.Light.Dialog 作为主题，因此显示在对话框中。

当我使用 XML 布局时，我可以为布局设置一个包含换行内容的最小高度

当没有内容或内容很少时，至少要高 x dp。 内容高于最小高度时为内容高度 当内容不适合屏幕高度时，屏幕高度，在这种情况下我可以滚动

使用 Jetpack Compose 的脚手架，我正在努力重建这种行为。即使没有内容，对话框也始终处于屏幕允许的高度。

我尝试了以下修饰符作为脚手架的参数：

Modifier.wrapContentHeight() - 对话框仍然和屏幕一样高 Modifier.defaultMinSize(minHeight = 250.dp) - 对话框仍然和屏幕一样高 Modifier.height(height = 250.dp) - 现在它变小了，但它固定在那个大小，当有更多内容时不会增长 Modifier.requiredHeightIn(min = 250.dp, max = getMyScreenHeightinDp()) - 对话框仍然和屏幕一样高

由于您可以使用 .height(...) 修饰符降低脚手架的高度，我认为应该也可以重新创建包装内容行为。但是怎么做呢？

【参考方案1】：

使用requiredHeightIn 确实有效，如下面的代码所测试。在此列表中，高度从 150.dp 到 400.dp 不等。如果您只提供 10 件物品，则为 150.dp。随着您添加更多项目，它的高度会增加，但最多只能达到 400.dp。

但是，有一个问题。导航抽屉从屏幕左侧滑出，而不是从对话框左侧滑出。有办法解决这个问题。您可以用自己的自定义抽屉替换导航抽屉。我做过一次，可以做到。

class MainActivity : ComponentActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)

        startActivity(intent)

        setContent 

            Dialog(
                onDismissRequest =   ,
                properties = DialogProperties(dismissOnClickOutside = false)
            ) 
                val scaffoldState = rememberScaffoldState()
                val scope = rememberCoroutineScope()
                Scaffold(
                    modifier = Modifier.requiredHeightIn(min = 150.dp, max = 400.dp),
                    scaffoldState = scaffoldState,
                    drawerContent =  Text("Drawer content") ,
                    topBar = 
                        TopAppBar(
                            title =  Text("Simple Scaffold Screen") ,
                            navigationIcon = 
                                IconButton(
                                    onClick = 
                                        scope.launch  scaffoldState.drawerState.open() 
                                    
                                ) 
                                    Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                                
                            
                        )
                    ,
                    floatingActionButtonPosition = FabPosition.End,
                    floatingActionButton = 
                        ExtendedFloatingActionButton(
                            text =  Text("Inc") ,
                            onClick =  /* fab click handler */ 
                        )
                    ,
                    content =  innerPadding ->
                        LazyColumn(contentPadding = innerPadding) 
                            items(count = 100) 
                                Text(it.toString())

                            
                        
                    
                )
            
        
    

【讨论】：

感谢您的回答。可悲的是，我必须报告您的解决方案对我不起作用。我创建了一个新项目并粘贴了您的代码。将最大高度设置为 800 dp，将一个列表项设置为 25 dp，并显示 8 个列表项。该对话框的高度是列表的四倍：imgur.com/a/C6B8yK5