当前位置: 首页 > news >正文

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

Android Studio 版本

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 {@Overrideprotected 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() {@Overridepublic 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.AppCompatActivityclass 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.spclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {showTextView()}}@Preview@Composableprivate 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 点击事件 参考

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

点击 pub get 

 

鸿蒙 Text 点击事件 参考

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 点击事件 参考

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 (<TextonPress={() => {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-android 或 npm start 运行

 

运行到IOS平台

采用 npx react-native run-ios 或 npm start 运行

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

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


 

案例


http://www.mrgr.cn/news/70696.html

相关文章:

  • Linux 常用操作指令大揭秘(下)
  • Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型多变量回归预测
  • 解决msvcr100.dll丢失的方法,5个实测可靠的解决方法
  • Linux故障排查中常用的命令
  • 鸿蒙next版开发:ArkTS组件通用属性(文本通用)
  • python printf中文乱码
  • 工具收集 - java-decompiler / jd-gui
  • Property ‘name‘ does not exist on type ‘Object‘.
  • 三十七、Python基础语法(异常)
  • 没有想到AI以这样的方式入侵人类——AI泛滥——关于AI的冷思考
  • 避免内存陷阱:掌握memcpy和memmove的正确用法
  • 智慧园区解决方案:科技赋能,打造未来管理新典范
  • 常见计算机网络知识整理(未完,整理中。。。)
  • Linux(CentOS)项目总结(前后端分离)
  • 【寻找重复数字】——脑筋急转弯...
  • 深入理解分支预测原理,揭开AMD Zen 5的高性能秘诀
  • 项目管理中不可或缺的能力
  • Qt文件系统-二进制文件读写
  • 【优选算法 — 滑动窗口】水果成篮 找到字符串中所有字母异位词
  • 函数
  • Flink独立集群+Flink整合yarn
  • MySQL-建表原则和方式
  • C语言中,“extern”关键字的含义与用法
  • [线程池]
  • day62 53.寻宝
  • 【编程概念基础知识】