【Android、IOS、Flutter、鸿蒙、ReactNative 】文本点击事件

Android Java TextView 实现 点击事件

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initListener();
    }

    private void initListener(){
        TextView textView=findViewById(R.id.textView);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.i("MainActivity","TextView 被点击了！！！");
            }
        });
    }
}

Android Kotlin TextView 实现 点击事件

import android.os.Bundle
import android.util.Log
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initListener()
    }

    private fun initListener() {
        val textView = findViewById<TextView>(R.id.textView)
        textView.setOnClickListener { Log.i("MainActivity", "TextView 被点击了！！！") }
    }
}

Android Compose Text 实现 点击事件

导入依赖包

dependencies {
    ......
    
    implementation ("androidx.activity:activity-compose:1.3.1")
    implementation("androidx.compose.material:material:1.4.3")
    implementation("androidx.compose.ui:ui-tooling:1.4.3")

}

启用Compose功能

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            showTextView()
        }
    }
    
    @Preview
    @Composable
    private fun showTextView() {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color(0xff6200EE)), contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Android Compose TextView",
                fontSize = 20.sp,
                fontStyle = FontStyle.Normal,
                modifier = Modifier.clickable {
                    Log.i("MainActivity", "TextView 被点击了！！！！")
                },
                textAlign = TextAlign.Center,
                color = Color(0xffffffff),
            )
        }
    }

}

IOS Object-c UITextView 点击事件

IOS SWift UITextView 点击事件

Flutter Text 点击事件

GestureDetector(
  onTap: () {
    if (kDebugMode) {
      print('Flutter Text 点击事件......');
    }
  },
  child: Text(
    'Flutter Text 点击事件',
    style: TextStyle(fontSize: 18.sp),
  ),
)

鸿蒙 Text 点击事件

Text(this.message)
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .width('100%')
  .onClick(() => {
    hilog.info(0x0000, 'IndexTag', '%{public}s', 'HarmonyOs Text 点击事件！！！')
  })
  .height('100%')
  .textAlign(TextAlign.Center)

ReactNative Text 点击事件

import React from 'react';
import {AppRegistry,Text,StyleSheet,Alert} from 'react-native';
import App from './App';
import {name as appName} from './app.json';


const textClick = () => {
  return (
    <Text
        onPress={() => {
            Alert.alert('你点击了按钮！');
        }}
        style={styles.text} >点击我</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    with:'100%', // 宽度
    height:100, // 高度
    textAlign: 'center', // 水平居中
    backgroundColor: '#ffcc00', // 设置背景颜色
    textAlignVertical: 'center', // 垂直居中
  },
});

AppRegistry.registerComponent(appName, () => textClick);

案例

切换到分支 flutter_textview_click