首页 > 解决方案 > Android Compose - 将传统视图与 ComposeView 结合使用

问题描述

我将 Compose 与现有片段一起使用。我在xml中的结构

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView />
            <MaterialToolbar />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.compose.ui.platform.ComposeView
            android:id="@+id/composeContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.core.widget.NestedScrollView>
</CoordinatorLayout>

在 ComposeView 中,我使用 LazyColum,它与日志一起崩溃

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

我认为该错误的原因是 LazyColum (可滚动)放在其他可滚动(NestedScrollView)中。但是如果我删除 NestedScrollView,它看起来像

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/composeContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

当我在 LazyColumn 中滚动列表时,CollapsingToolbarLayout 没有滚动。那是下一个错误。

如何解决?

请帮我。谢谢。

标签: androidandroid-collapsingtoolbarlayoutandroid-jetpack-compose

解决方案


从 Chris Banes 中解开您的撰写视图<androidx.core.widget.NestedScrollView>并使用此解决方法。它就像一个魅力。只需按照评论中的说明进行操作:

 * setContent {
 *     Surface(
 *         // Add this somewhere near the top of your layout, above any scrolling layouts
 *         modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())
 *     ) {
 *         LazyColumn() {
 *             // blah
 *         }
 *     }
 * }

这是一个现有的 Compose 错误,可以在问题跟踪器中找到。


推荐阅读