Day 17 Compose Gestures partI

今年的疫情蛮严重的，希望大家都过得安好，希望疫情快点过去，能回到一些线下技术聚会的时光～

今天目标：了解 Compose UI 上的 Gestures 是怎麽作用的。

今天要研究的部分是手势，也是 Android 开发上很常会遇到的问题，
手势基本上就分成按、压、滑、拖、多点触控。

我今天就依照Android developer里面的 Gestures 来进行实作跟分享，

首先是Click与 Press。

点击事件

@Composable fun ClickableSample() {     
    val count = remember { mutableStateOf(0) }     
    
    // content that you want to make clickable    
    Text( text = count.value.toString(),
         modifier = Modifier.clickable 
    { count.value += 1 }) 
}

点击事件: 试着实作了LazyColumn 的 click event按压事件

Modifier.pointerInput(Unit) {     
    detectTapGestures(         
    onPress = { /* Called when the gesture starts */ },
    onDoubleTap = { /* Called on Double Tap */ },
    onLongPress = { /* Called on Long Press */ },
    onTap = { /* Called on Tap */ }     ) }

触碰事件

@Composable fun TapDemo() {     
    val count =remember{mutableStateOf(0)} 
    Column{ Column(             
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally){
        Text(text = "Click Count:${count.value}") } 
        Column(modifier = Modifier.fillMaxSize(),   
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center){    
   
        Text("Android, Hello World!", 
        modifier =  Modifier.pointerInput(Unit){
            detectTapGestures( 
              onPress ={ count.value++ },
              onDoubleTap = { 
                Toast.makeText(applicationContext,
                "Double Tap",Toast.LENGTH_SHORT).show()},
              onLongPress ={ 
                Toast.makeText(applicationContext,
                "Long Press", Toast.LENGTH_SHORT).show()},
              onTap ={ 
                Toast.makeText(applicationContext, "Tap",
                Toast.LENGTH_SHORT).show()} 
) }) }     } }

将程序码都实作在同一个画面的执行画面

接着是滑动的部分。

@Composable
fun ScrollBoxes() {
  Column(
          modifier = Modifier
              .background(Color.LightGray)
              .size(100.dp)
              .verticalScroll(rememberScrollState()) 
          // 记住目前滑动的状态
      ){
    repeat(10){
    Text("Item $it", modifier = Modifier.padding(2.dp))
   }
  }
}

我们利用范例来解释滑动的部分，可以看到只要透过 verticalScroll 就可以让 Column 实作滑动的效果。