如何防止jetpack compose在对话框中显示时占据屏幕的整个高度

Question

我有一个 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(...)

修改器降低脚手架的高度，我认为也应该可以重新创建包装内容行为。但如何呢？

Answer 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())

                            }
                        }
                    }
                )
            }
        }
    }
}

Answer 2

您可以根据修改器中的百分比设置高度。

.fillMaxHeight(0.90f)

Answer 3

尝试找到解决方案，但找不到（尝试过a.o.

Modifier.height(IntrinsicSize.Min)

，但不支持）

最终更改了我的布局以实际使用全尺寸弹出窗口，从而无需解决此问题和其他一些问题。

从现在开始我要使用的经验法则是，如果对话框变得足够复杂，您实际上需要一个

Scaffold

，只需全屏