将滑动手势处理添加到“撰写”视图

时间:2019-11-16 14:46:46

标签: android-jetpack-compose

找不到任何示例代码。由于我没有看到任何手势类,因此我只看了常规文档,而这些文档的重点是将Activity设置为GestureRecognizerCompat,这是行不通的。进行设置即可,但是不会发生(在仿真器中)检测到滑动或点击的情况。在SwiftUI中,有手势处理程序。在Compose Slack Channel上被询问,并被告知要寻找FooGestureDetector可组合函数。

寻找一些示例代码。最终有一部Compose教程,它很不错,但是完成后您的应用程序几乎没什么用。我还查看了GitHub上的示例项目,该示例项目用于创建发布到新闻站点的帖子。有一些有趣的东西,但没有手势。

主要目标是拥有多个Card,并具有在其中滑动的能力(la ViewPager(1/2),在Compose中尚不可用)。

我确实设法检测到对视图的点击,如下所示:

@Composable
fun PreviewPane(name: String, info:String) {
    val pagenumber = +state { 0 }

    CustomTheme{
        Column(
            crossAxisSize = LayoutSize.Expand,
            modifier = Spacing(16.dp)
        ) {
        Clickable(onClick = { Log.d("DEMO", "click detected..")}) {
            Text(text = name, style = TextStyle(fontWeight = FontWeight.Bold))
            Text(text = info)
            Text(text = "${pagenumber.value}")
        }

        Row {
            Button(text = "Back", onClick = {
                if (pagenumber.value > 0) pagenumber.value--
                Log.d("DEMO", "button clicked..")
            })
            Button(text = "Next", onClick = {
                pagenumber.value++
                Log.d("DEMO", "button clicked..")
            })
        }
    }

    }
}

这有效,并且我确实看到了日志消息(注意,我没有用Click指令包装按钮)。但是我真正想要的是外部视图的滑动检测,其中包含所有这些组件。

1 个答案:

答案 0 :(得分:1)

@Rob如果只需要查看寻呼机,则可以检查Gist是否适用于ViewPager,我为ViewPager创建了一个示例,请从要点复制ComposeViewPager.kt.kt并提供以下示例。

注意:我从Leland Richardson Git存储库中提取了这段代码,并根据需要进行了修改。

例如:

val listItem = arrayListOf<String>("One", "Two", "Three", "Four", "Five")

@Composable
fun FullViewPagerSample() {
    Box {
        ViewPager(
            items = listItem
        ) { listItem, itemWidthInDp ->
            ViewItem(
                item = listItem,
                normalWidth = itemWidthInDp
            )
        }
    }
}


@Composable
fun ViewPagerSample() {
    val configuration = ConfigurationAmbient.current
    val screenWidth = configuration.screenWidthDp.dp
    val posterWidthDp = screenWidth * 0.6f
    Box {
        ViewPager(
            items = listItem, width = posterWidthDp
        ) { listItem, itemWidthInDp ->
            ViewItem(
                item = listItem,
                normalWidth = itemWidthInDp
            )
        }
    }
}

@Composable
fun ViewPagerSampleWithYDeltaAnimation() {
    val configuration = ConfigurationAmbient.current
    val screenWidth = configuration.screenWidthDp.dp
    val posterWidthDp = screenWidth * 0.6f
    Box {
        ViewPager(
            items = listItem, width = posterWidthDp, bottomYDelta = 50f
        ) { listItem, itemWidthInDp ->
            ViewItem(
                item = listItem,
                normalWidth = itemWidthInDp
            )
        }
    }
}

@Composable
fun ViewItem(
    item: String,
    normalWidth: Dp,
    modifier: Modifier = Modifier,
    isScrollable: Boolean = true
) {
    ScrollableColumn(
        modifier = modifier
            .width(normalWidth)
            .padding(10.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(Color.Red),
        contentPadding = PaddingValues(posterPadding),
        isScrollEnabled = isScrollable,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            item,
            fontSize = 24.sp,
            color = Color.White
        )
    }
}

结果将是

enter image description here