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

Android Studio 版本

Android Java TextView 实现 点击事件 参考

Dart 复制代码
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 实现 点击事件 参考

Dart 复制代码
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 实现 点击事件 参考

导入依赖包

Dart 复制代码
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功能

Dart 复制代码
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),
            )
        }
    }

}

Xcode 版本

IOS Object-c UITextView 点击事件 参考

IOS SWift UITextView 点击事件

Flutter Text 点击事件 参考

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

点击 pub get

鸿蒙 Text 点击事件 参考

Dart 复制代码
import hilog from '@ohos.hilog'

@Entry
@Component
struct Index {
  @State message: string = 'HarmonyOs Text 点击事件'

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

打开后出现如下情况点击 Migrate Assistant

点击预览 Preview

ReactNative Text 点击事件 参考

Dart 复制代码
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);

执行 npm install 安装项目所需要的依赖

运行到安卓

采用 npx react-native run-androidnpm start 运行

运行到IOS平台

采用 npx react-native run-iosnpm start 运行

切换到iOS目录从新安装依赖

Dart 复制代码
// 清除缓存
pod cache clean  --all
 
//移出本地 pod文件依赖
pod  deintegrate
 
//执行安装显示下载信息
pod install --verbose --no-repo-update

案例

相关推荐
九丝城主4 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克9 小时前
七、性能优化
flutter·性能优化
恋猫de小郭17 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海1 天前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
伍哥的传说1 天前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
小蜜蜂嗡嗡1 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
旷世奇才李先生1 天前
Swift 安装使用教程
开发语言·ios·swift
90后的晨仔1 天前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios
finger244801 天前
谈一谈iOS线程管理
ios·objective-c
Digitally1 天前
如何将大型视频文件从 iPhone 传输到 PC
ios·iphone